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Register a Product 
Register the Adobo Press products you own to unlock benefits associated with them. Simply entor Benefits of Registration 
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\nsiets 3 + Access to download files and updates. 
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| would like to receive updates about products | registe and 
receive exclusive offers from Adobe Press and its fawily of 

brands, | can unsubscribe al any time. 


‘The ISBN Is on the back cover of your product and looks similar to this: 


4 Answer the questions as proof of purchase. 
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son files or web edition, go to 
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support for assistance. 


5 The lesson files can be accessed through the Registered Products tab on your Account page. 


6 Click the Access Bonus Content link below the title of your product to proceed to the down- 


load page. Click the lesson file links to download them to your computer. 
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GETTING STARTED 


Adobe® Dreamweaver is one of the leading web-authoring programs available. 
Whether you create websites for others for a living or plan to create one for 
your own business, Dreamweaver offers all the tools you need to get profes- 
sional results. 


About Classroom in a Book 


Adobe Dreamweaver Classroom in a Book’ (2020 release) is part of the official 
training series for graphics and publishing software developed with the support 
of Adobe product experts. 


The lessons are designed so/that you can learn at your own pace. If you’re new 
to Dreamweaver, you'll learn the fundamentals of putting the program to work. 
If you are an experienced user, you'll find that Classroom in a Book teaches 
many advanced features, including tips and techniques for using the latest ver- 
sion of Dreamweaver. 


Although each lesson includes step-by-step instructions for creating a specific 

project, you'll have room for exploration and experimentation. You can follow 

the book from start to finish or complete only those lessons that correspond to 
your interests and needs. Each lesson concludes with a review section contain- 
ing questions and answers on the subjects you've covered. 


TinyURLs 


At several points in the book, I reference external information available on the 
internet. The uniform resource locators (URLs) for this information are often 
long and unwieldy, so we have provided custom TinyURLs in many places for 
your convenience. Unfortunately, the TinyURLs sometimes expire over time 
and no longer function. If you find that a TinyURL doesn’t work, look up the 
actual URL provided in the appendix. 
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2 Getting Started 


Prerequisites 


Before using Adobe Dreamweaver Classroom in a Book (2020 release), you should 
have a working knowledge of your computer and its operating system. Be sure you 
know how to use the mouse, standard menus, and commands, as well as how to 
open, save, and close files. If you need to review these techniques, see the printed 
or online documentation included with your Windows or macOS operating system. 


Conventions used in this book 


Working in Dreamweaver means you'll be working with code. We have used several 
conventions in the following lessons and exercises to make working with the code 
in this book easier to follow and understand. 


Bolded text 


Certain names, words, and phrases will be bolded from time to time, usually when 
first cited in an instruction. This styling will include text, other than HTML or CSS 
code, that needs to be entered into program dialogs or into the body of a webpage, 
like this: 


Type Insert main heading here 


Filenames, like favorite-styles.css, will also be bolded as needed to identify crucial 
resources or targets of a specific step or exercise. Be aware that these same names 
may not be bolded in introductory descriptions or general discussion. Be sure to 
identify all resources required in a specific exercise prior to commencing it. 


Code font 


In many instructions, you will be required to enter HTML code, CSS rules and 
properties, and other code-based markup. To distinguish the markup from the 
instructional text, the entries will be styled with a code font, like this: 


Examine the code <h1>Heading goes here</h1>. 


In instances where you must enter the markup yourself, the entry will be formatted 
in color, like this: 


Insert the following code: <h1>Heading goes here</h1> 


Enter the code exactly as depicted, being careful to include all punctuation marks 
and special characters. 


Strikethrough 


In several exercises, you will be instructed to delete markup that already exists 
within the webpage or style sheet. In those instances, the targeted references will 
be identified with strikethrough formatting, like this: 


Delete the following values: 


margin: 10px 20px 46p<20px; 

background-image: url(images/fern.png)su+lCimages/stripe-prg); 
Be careful to delete only the identified markup so that you achieve the following 
result: 

margin: 10px 20px; 

background-image: url(images/fern.png) ; 


Missing punctuation 


HTML code, CSS markup, and JavaScript often require the use of various punctua- 
tion, such as periods (.), commas (,), and semicolons (;), and can be damaged by 
their incorrect usage or placement. Consequently, I have omitted periods and other 
punctuation expected in a sentence or paragraph from an instruction or hyper- 
link whenever it may cause confusion or a possible error, as in the following two 
instructions: : 


Enter the following code: <h1>Heading goes here</h1> 


Type the link http: //adobe.com 


Element references 


Within the body of descriptions and exercise instructions, HTML elements may 
be referenced by name or by class or id attribute. When an element is identified 
by its tag name, it will appear as <section> or section. When referenced by its 
class attribute, the name will appear with a leading period (.) in a code-like font, 
like this: . content or .sidebar1. References to elements by their id attribute 
will appear with a leading hash (#) and in a code font, like this: #top. This practice 
matches the way these elements appear in Dreamweaver’s tag selector interface. 


Windows vs. macOS instructions 


In most cases, Dreamweaver performs identically in both Windows and macOS. 
Minor differences exist between the two versions, mostly because of platform- 
specific issues out of the control of the program. Most of these are simply dif- 
ferences in keyboard shortcuts, how dialogs are displayed, and how buttons are 
named. In most cases, screen shots were made in the macOS version of Dream- 
weaver and may appear different from your own screen. 
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Where specific commands differ, they are noted within the text. Windows com- 
mands are listed first, followed by the macOS equivalent, such as Ctrl+C/Cmd+C. 
Common abbreviations are used for all commands whenever possible, as follows: 


Windows macOS 
Control = Ctrl Command = Cmd 
Alternate = Alt Option = Opt 


As lessons proceed, instructions may be truncated or shortened to save space, 
with the assumption that you picked up the essential concepts earlier in the lesson. 
For example, at the beginning of a lesson you may be instructed to “choose Edit > 
Copy” or “press Ctrl+C/Cmd+C”’ Later, you may be told to “copy” text or a code 
element. These should be considered identical instructions. 


If you find you have difficulties in any particular task, review earlier steps or 
exercises in that lesson. In some cases, if an exercise is based on concepts covered 
earlier, you will be referred to the specific lesson. 


Installing the program 


Before you perform any exercises in this book, verify that your computer system 
meets the hardware requirements for Dreamweaver, that it’s correctly configured, 
and that all required software is installed. 


If you do not haye Dreamweaver, you will first have to install it from Creative 
Cloud. Adobe Dreamweaver must be purchased separately; it is not included with 
the lesson files that accompany this book. Go to helpx.adobe.com/dreamweaver/ 
system-requirements.html to obtain the system requirements. 


@ Chrome File Edit View History Bookmarks People Window Help CwzPrP @O@Aadb < 
ee LAN Buy Adobe Dreamweaver | W x + 

S C  & adobe.com/products/dreamweaver.htm “ 9 » @ aa oO 
J Adobe Creativity & Design Marketing & Commerce PDF & E-signatures More p tal it 


[Dw i ADOBE DREAMWEAVER What's New Learn & Support \ Download 


Responsive websites. Really fast. 


Download : 
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Go to www.adobe.com/creativecloud/plans.html to sign up for Adobe Creative 
Cloud. Dreamweaver may be purchased with the entire Creative Cloud family or as 
a standalone app. Adobe also allows you to try Creative Cloud and the individual 
applications for seven days for free. 


Check out www.adobe.com/products/dreamweaver.html to learn more about the 
different options for obtaining Dreamweaver. 


Updating Dreamweaver to the latest version 


Although Dreamweaver is downloaded and installed on your computer hard drive, 
periodic updates are provided via Creative Cloud. Some updates provide bug fixes 
and security patches, while others supply amazing new features and capabilities. 


The lessons in this book are based on Dreamweaver (2020 release) and may not 
work properly in any earlier version of the program. To check which version is 
installed on your computer, choose Help > About Dreamweaver (in Windows) or 
Dreamweaver > About Dreamweaver (on macOS). A window will display the ver- 
sion number of the application and other pertinent information. 


@ Momence File Edit View ins 


[Dw] Adobe Dreamweaver 


20.0 


15196 Build 


If you have an earlier version of the program installed, you will have to update 
Dreamweaver to the latest version. You can check the status of your installation by 
opening the Creative Cloud manager and logging in to your account. 


@ = CreativeCloud File Edit Window Help @0 %'’eraw 
a 
@@@ Apps Yourwor Q x @ f © & @ 
Ul & UX 
HAE dase After Effects ies) Dw] Dreamweaver a 
@s Design & Layout Design and develop r ‘ 
3 Video & Motion ; 
of Iilustration © 
GB Ul & Ux 
b —- a __ aS 


Check out helpx.adobe.com/creative-cloud/help/download-install-trial.html to 
learn how to download and install a limited-period trial of Creative Cloud to your 


computer or laptop. 
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ing the lesson files or 
Web Edition, go to 
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Online content 


Your purchase of this Classroom in a Book includes online materials provided by 


way of your Account page on adobepress.com. These include: 


Lesson 12, “Working with Mobile Design” 


Lesson 13, “Working with Web Animation and Video” 


Lesson files 


To work through the projects in this book, you will need to download the les- 


son files by following the instructions in the “Accessing the lesson files and Web 


Edition” section below. 


Web Edition 


The Web Edition is an online interactive version of the book providing an enhanced 


learning experience. Your Web Edition can be accessed from any device with a con- 


nection to the internet, and it contains: 


The complete text of the book 
Hours of instructional video keyed to the text 


Interactive quizzes 


Accessing the lesson files and Web Edition 


You must register your purchase on adobepress.com in order to access the online 
content: 


1 


2 
3 
4 
5 


Go to www.adobepress.com/DreamweaverCIB2020. 
Sign in or create a new account. 

Click Submit. 

Answer the question as proof of purchase. 


The lesson files can be accessed from the Registered Products tab on your 
Account page. Click the Access Bonus Content link below the title of your prod- 
uct to proceed to the download page. Click the lesson file link(s) to download 
them to your computer. 


The Web Edition can be accessed from the Digital Purchases tab on your 
Account page. Click the Launch link to access the product. 


® Note: If you purchased a digital product directly from www.adobepress.com or 
www.peachpit.com, your product will already be registered. However, you still need to 
follow the registration steps and answer the proof of purchase question before the Access 
Bonus Content link will appear under the product on your Registered Products tab. 


The files are compressed into ZIP archives to speed up download time and to 
protect the contents from damage during transfer. You must decompress (or 
“unzip”) the files to restore them to their original size and format before you use 
them with the book. Modern Mac and Windows systems are set up to open ZIP 
archives by simply double-clicking. 


6 Do one of the following: 


¢ Ifyou downloaded DW2020_Lesson_Files.zip, unzipping the archive will 
produce a folder named DW2020_Lesson_Files containing all the lesson 


files used by the book. 
@ Finder File Edit View Go Window Help 

eee ©) DwW2020 

< ey = ee avi «= 6 3 vis 
| Back/Forward View. Group Shere Edit Tags Action Ejact. Get Info Dropbox 

Name a Date Modified Size Kind 

¥ Lessons Today at 12:48 PM ~- Foider 
>» © lesson01 Aug 15, 2019 at 4:08 PM -- Folder 
® ~~ lesson02 Aug 18, 2018 at 4:37 PM -- Folder 
» ~ \ lesson03 Sep 11, 2 at 1:23 AM -- Folder 
> ~~ lesson04 Sep 19, 2019 at 7:51 AM ~~ Folder 
> |) lesson0S Sep 24, 2019 at 10:10 AM -- Folder 
> ~~ lesson06 Oct 7, 2019 at 3:14 PM --  Foider 
> ~~ lesson07 Oct 7, 2019 at 3:10 PM -~ Folder 
>» ~~ lesson0s Oct 27, 2019 at 11:22 AM -- Folder 
> —» lesson09 Oct 28, 2019 at 7:48 PM ~~ Folder 
> ~~ lessoni0 Oct 25, 2019 at 4:03 PM ; -- Folder 
>» —) lessoni1 Oct 25, 2019 at 4:03 PM f ~~ Folder 
» ~~ lessoni2 Today at 12:47 PM -- Folder 
» ~~» lesson13 Today at 12:47 PM --  Foider 


iain sails col EG OS OP ORE aia ela te 
¢ If you downloaded the lessons individually, create a new folder on your hard 
drive and name it DW2020. Unzip the individual lesson files to this folder. 
That way, all the lesson files will be stored in one location. Do not share or 
copy files between lessons. 


Recommended lesson order 


The training in this book is designed to take you from A to Z in basic to inter- 
mediate website design, development, and production. Each new lesson builds 
on previous exercises, using supplied files and assets to create an entire website. 
We recommend you download all lesson files at once. 


Start with Lesson 1 and proceed through the entire book to Lesson 11. Continue 
with the online Lessons 12 and 13 (refer to the “Online content” section for more 
information about the online material). 


We recommend that you do not skip any lessons, or even individual exercises. 
Although ideal, this method may not be a practicable scenario for every user. So 
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® Note: Windows may 
treat ZIP archives like a 
file folder, allowing you 
to access the contents 
without decompressing 
them first. To use the 
files in Dreamweaver, 
you must decompress 
each archive first. 


© Note: The files are 
updated from time 

to time, so the dates 
depicted in screen shots 
may be different from 
the ones you download. 
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each lesson folder contains all the files needed to complete every exercise within 
it using partially completed or staged assets, allowing you to complete individual 


lessons out of order, if desired. 


However, don’t assume that the staged files and customized templates in each 
lesson represent a complete set of assets. It may seem that these folders contain 
duplicative materials, but these “duplicate” files and assets, in most cases, cannot be 
used interchangeably in other lessons and exercises. Doing so will probably cause 
you to fail to achieve the goal of the exercise. . 


For that reason, you should treat each lesson folder as a standalone website. Copy 
the lesson folder to your hard drive, and create a new site for that lesson using the 
Site Setup dialog. Do not define sites using subfolders of existing sites. Keep your 
sites and assets in their original folders to avoid conflicts. 


One suggestion is to organize the lesson folders in a single web or sites master 
folder near the root of your hard drive. But avoid using the Dreamweaver appli- 
cation folder. In some cases, you'll want to use a local web server as your testing 
server, which is described in Lesson 11, “Publishing to the Web?’ 


Bonus material 


This book has so much great material that we couldn’ fit it all in the printed pages, 
so we placed Lesson 12, “Working with Mobile Design,’ and Lesson 13, “Working 
with Web Animation and Video,’ on the adobepress.com website. 


You will find these lessons on your Account page once you register your book, as 
described in “Accessing the lesson files and Web Edition.” 


On first launch 


Right after installation or upon first launch, Dreamweaver will display several 
introduction screens. First, the Sync Settings dialog will appear. If you are a user of 
previous versions of Dreamweaver, select Import Sync Settings to download your 
existing program preferences. If this is the first time you’ve used Dreamweaver, select 
Upload Sync Settings to sync your preferences to your Creative Cloud account. 


Syne Settings 


Settings from previous version of Dreamweaver were synchronized 
with Creative Cloud. You can import these settings or upload local settings 
to Creative Cloud 


{_] Always sync settings automatically 


In the book, I use the lightest interface themes for the screen shots. This was done 
both to save ink in the printing and to place less stress on the environment. Feel 
free to pick the color themes you prefer. 


Choosing the program color theme 


If you purchased the book after you installed and launched Dreamweaver, you may 
be using a different color theme than the one pictured in most screen shots in the 
book. All exercises will function properly using any color theme, but if you want to 
configure your interface to match the one shown, complete the following steps. 


1 Select Edit > Preferences (in Windows) or Dreamweaver > Preferences 
(in macOS). 


The Preferences dialog appears. 


2 Select Interface from the Category list. 


@ Petco File Edit View In t View Insert Tools Find Site Window Help i @OR.e 
: : Preferences. ; 


Category Interface 

General 

Accessibility eens | & i 
Code Format Bt Hae 
Code Hints 


Code Rewriting gf Code Theme: Name 
Copy/Paste i | Cassie r | 


CSS Styies | Dark 

Extract | Light 

File Compare | Monaki 

File Types / Editors Raven Dark | 
Fonts | Solarized Light 
Git | | 
Highlighting PENT ORT RSE TE 
in-App Updates * 

interface 

Invisible Elements 


3 Select the lightest App Theme color. 
Select Classic from the Code Theme menu. 


The interface changes to the new theme. Depending on which app theme you 
select, the code theme may change automatically. The changes are not perma- 
nent yet. If you close the dialog, the theme will revert to the original colors. 


4 Click the Apply button. 
The theme changes are now permanent. 
5 Click the Close button. 


Feel free to change the color theme at any time. Often users select the theme that 
works best in their normal working environment. The lighter themes work best in 
well-lighted rooms, while the darker themes work best in the indirect or controlled 
lighting environments used in some design offices. All exercises will work properly 


in any theme color. 
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Setting up the workspace 


Dreamweaver (2020 release) includes two main workspaces to accommodate vari- 
ous computer configurations and individual workflows. For this book, the Standard 


workspace is recommended. 
1 If the Standard workspace is not displayed by default, you can select it from the 


Workspace dropdown menu in the upper-right corner of the program interface. 


@ © 3 F 4 ©) 8%H) Sat 1:26PM Jim Maivald Q @ = ” 


Developer 


-v Standard ; 
Files CC Ubrariex’ Insert CSS Besigner Ly i 
Y «e : Reset 'Standard' 
: = Blessono1 New Workspace... 
a cai | se) Manage Workspaces... 
Local Files T Save Current 


2 Ifthe default Standard workspace has been modified—where certain toolbars 
and panels are not visible (as they appear in the figures in the book)—you can 
restore the factory setting by choosing Reset ‘Standard’ from the Workspace 


dropdown menu. 


@ © ¥ Fz w) 86%G) FH Satt:26PM JimMaivald Q @ 3= 


Files CC Libraries insert S35 Designer 
Ng ad Bi tesson01 
Local Files T 
> EB Site ~ lesson01 (NewRoad:MacProjects:Peachpit:webs:DW2020:Le... 


These same options can be accessed from the Window > Workspace Layout menu. 


Site EUIEETE Help CH RPO@AAd © ¢ Sie EET Help C#RMOMAadS © 3 
Vv Application Frame ‘ Y Application Frame i : 
Hide Panels F4 2 Files CC Libr Hide Panels Fa files CC Libr 
Toolbars > - Toolbars > Lp i] Sage 
Arrange : > ea) Arrange > &°¢ 6 
Workspace Layout [a4 Developer Workspace Layout le Developer ‘ 
v Standard Vv . 
‘ v Assets re tomnons nes ' v Assets ee . 
INt Behaviors Ors Reset ‘Standard’ INt Behaviors tive Reset.’Standard' 
CC Libraries New Workspace... CC Libraries New Workspace... 
Code Inspector X FIO Manage Workspaces... Code Inspector NFIo | Manage Workspaces... 
CSS Designer Sr Save Current CSS Designer Seu Save Current 
CEO Trancitiane wR OLS Trancitinne % wP 


Most of the figures in this book show the Standard workspace. When you finish 
the lessons in this book, experiment with each workspace to find the one that you 
prefer, or build your own configuration and save the layout under a custom name. 


For a more complete description of the Dreamweaver workspaces, see Lesson 1, 
“Customizing Your Workspace” 
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Defining a Dreamweaver site 


In the course of completing the following lessons, you will create webpages from 
scratch and use existing files and resources that are stored on your hard drive. The 
resulting webpages and assets make up what's called your local site. When you are 
ready to upload your site to the internet (see Lesson 11, “Publishing to the Web”), 
you publish your completed files to a web-host server, which then becomes your 
remote site. The folder structures and files of the local and remote sites are usually 
mirror images of one another. 


The first step is to define your local site. 


1 
2 


Launch Adobe Dreamweaver (2020 release) or later. 
Open the Site menu. 


The Site menu provides options for creating and managing standard 
Dreamweaver sites. 


Choose New Site. 


Insert Tools Find | Site | Window Help CyZzPr@h®d 
New, Si ee 
Manage Sites... 


Get C#B 4 $2) 


Put THU 


The Site Setup dialog appears. 


Site Setup for Unnamed Site 2 


ote A Dreamweaver site is a collection of all of the files and assets you use in your 
servers website. A Dreamweaver site usually has two parts: a local folder on your 
_? CSS Preprocessors computer where you store and work on files, and a remote folder on a server 
.> Advanced Settings where you post the same files to the web. 


Here you'll select the local folder and a name for your Dreamweaver site. 


ae 


Local Site Folder: /webs/DW202U/Lessons/Unnamed Site 2 i=) 


) 
Site Name: 


To create a standard website in Dreamweaver, you need only name it and select 
the local site folder. The site name should relate to a specific project or client 
and will appear in the Files panel Site dropdown menu. This name is intended 
for your own purposes only; it will not be seen by the public, so there are no 
limitations to the name you can create. Use a name that clearly describes the 
purpose of the website. For the purposes of this book, use the name of the les- 
son you intend to complete, such as lesson01, lesson02, lesson03, and so on. 


@ Warning: You must 


unzip the lesson files 


before you create your 


site definition. 
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@® Note: The main 


folder that contains the 
site will be referred to 
throughout the book as 


the site root folder. 
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5 Next to the Local Site Folder field, click the Browse For Folder icon t 


4 Type lesson01 or another name, as appropriate, in the Site Name field. 


Site Setup for Unnamed Site 2 
es oe Coens 
Servers 
+> CSS Preprocessors 
> Advanced Settings 


A Dreamweaver site is a collection of all of the files and assets you use in your 
website. A Dreamweaver site usually has two parts: a local foider on your 
computer where you store and work on files, and a remote folder on a server 
where you post the same files to the web. 


Here you'll select the local folder and a name for your Dreamweaver site. 


Site Name: { lesson0}| 7 


Local Site Folder: jwebs/D\82020/Lessons/Unnamed Site 2 B 


6 Navigate to the appropriate folder containing the lesson files you downloaded 


from peachpit.com (as described earlier), and click Select/Choose. 


a 
= © 
Site g | Local File 


See A Dreamweaver site is a collection-of all of the files and assets you use in your 


website. A Dreamweaver site usually has two parts: a local folder on your im ea 
computer where you store and work on files, and a remote folder on a server 
where you post the same files to the web. 


> CSS Preprocessors 
tu mM > Advanced Settings 


Here you'll select the loca! folder and a name for your Drearnweaver site. 


Site Name: lesson01 


< =v cc M™ Lessons ce; Q 


Name ~ Date Modified Size Kind 
> Gm lesson01 
» © lesson02 
® 1 lesson03 
» (9) lesson04 
> 
® 


> lesson05 
~* lesson06 


Wi dacannn? 


New Folder Cancel 


am Sor 


You could click Save at this time and begin working on your new website, but 
you'll add one more piece of handy information. 


Click the arrow next to the left of the Advanced Settings category to reveal the 
categories listed there. 
Select Local Info. 


Site Setup for lesson01 


ae Default images foider [Fe eae eee ee is Sees & 
2 SENTICR ETS Links relative to: ©} Document © Site Root 
UTP} advanced Settings ey 
Local Info Web URL 
Cloaking 
Design Notes Enter the Wat URL if you don’t have a remote server defined. if you 


have a remote server defined, Dreamweaver uses the Web URL 


File View Columns specified in the server settings. 


Contribute 
PHP 


8 Next to the Default Images Folder field, click the Browse For Folder icon 


Although it’s not required, a good policy for site management is to store differ- 
ent file types in separate folders. For example, many websites provide indi- 
vidual folders for images, PDFs, videos, and so on. Dreamweaver assists in this 
endeavor by including an option for a default images folder. 


Later, as you insert images from other locations on your computer, Dream- 
weaver will use this setting to automatically move the images into the site 
structure. 


ee 
Es 


a) 


When the dialog opens, navigate to the appropriate images folder for that lesson 
or site and click Select/Choose. 


Site Lacal Fi 
. fault images f a G 
Severe Default images folder & 5p 


CSS Preprocessors 


a e 2 Links relative to: ©) Document © Site Root 
S TULL aavanced Settings 


Mi lesson01 < Q 


Name Date Modified Size Kind 


Today at 1:30 PM ==. Folder 


The path to the images folder appears in the Default Images Folder field. The 
next step is to enter your site domain name in the Web URL field. 


Enter http://favoritecitytour.com for the lessons in this book, or enter your 
own website URL, in the Web URL field. 


Site Setup for lesson01 


Site 5 
Default Images folder [/webs/DW2020/Lessons/lesson01/images | S$ 


Servers 


> CSS Preprocessors Links relative to Oo Document 1 Site Root 


» Advanced Settings 


Local Info Web URL:  http://favoritecitytour.com/ 


Cloaking 
Enter the Web URL if you don't have a remote server defined. if you 
have a remote server defined, Dreamweaver uses the Web URL 

specified in the server se 


Design Notes 


File View Columns 


Contribute 


You've entered all the information required to begin your new site. In subse- 
quent lessons, you'll add more information to enable you to upload files to your 
remote and testing servers. 


10 In the Site Setup dialog, click Save. 


The Site Setup dialog closes. 


Whenever a site is selected or modified, Dreamweaver will build, or rebuild, 
a cache of every file in the folder. The cache identifies relationships between 
the webpages and the assets within sites and will assist you whenever a file is 
moved, renamed, or deleted to update links or other referenced information. 


@® Note: The folder 
that contains the image 
assets will be referred to 
throughout the book as 
the site default images 
folder or the default 
images folder. 


© Note: Resource fold- 
ers for images and other 
assets should always be 
contained within the 
main site root folder. 
Dreamweaver will warn 
you when the images 
folder is outside the site 
root. 


@® Note: The Web URL 
is not needed for most 
static HTML sites, but 
it’s required for work- 
ing with sites using 
dynamic applications or 
to connect to databases 
and a testing server. 
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11 Click OK to build the cache, if necessary. 


root folder, HTTP address, or cloaking settings 


é The cache will now be recreated because the name, 
of the site have been changed. 


ss 


The cache is rebuilt, which should only take a few seconds at most. 


In the Files panel, the new site name appears in the Site List dropdown menu. 
As you add more site definitions, you can switch between the sites by selecting 


the appropriate name from this menu. 
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Setting up a site is a crucial first step in beginning any project in Dreamweaver. 
Knowing where the site root folder is located helps Dreamweaver determine link 
pathways and enables many site-wide options, such as orphaned-file checking and 
Find and Replace. 


Checking for updates 


Adobe periodically provides software updates. To check for updates in the pro- 
gram, choose Help > Updates. An update notice may also appear in the Creative 
Cloud update desktop manager. 


View Insert Tools Find Site Window [atlas @ © 34 
Search | — 
Dreamweaver Tutorial 
Quick Tutorial > i 
Reset Contextual Feature Tips es 
Dreamweaver Help FA 


Adobe Online Forums 
, Submit Bug/Feature Request 
r another beverage) into web: 


Manage My Account... 
___ Sign Ou 
_ Updates 


For book updates and bonus material, visit your Account page on adobepress.com 
and select the Lesson & Update Files tab. 


Additional resources 


Adobe Dreamweaver Classroom in a Book (2020 release) is not meant to replace 
documentation that comes with the program or to be a comprehensive reference 
for every feature. Only the commands and options used in the lessons are explained 
in this book. For comprehensive information about program features and tutorials, 
refer to these resources: 


Adobe Dreamweaver Learn & Support: helpx.adobe.com/dreamweaver/ 
tutorials.html (accessible in Dreamweaver by choosing Help > Dreamweaver 
Tutorial) is where you can find and browse tutorials, help, and support on 
Adobe.com. 


Dreamweaver Help: helpx.adobe.com/support/dreamweaver.html is a refer- 
ence for application features, commands, and tools (press Fl or choose Help > 
Dreamweaver Help). 


Adobe Forums: forums.adobe.com lets you tap into peer-to-peer discussions and 
questions and answers on Adobe products. 


Resources for educators: adobe.com/education and edex.adobe.com offer a 
treasure trove of information for instructors who teach classes on Adobe software. 
You'll find solutions for education at all levels, including free curricula that use an 
integrated approach to teaching Adobe software and that can be used to prepare 
for the Adobe Certified Associate exams. 


Also check out these useful links: 


Adobe Add-ons: exchange.adobe.com/addons is a central resource for finding 
tools, services, extensions, code samples, and more to supplement and extend your 
Adobe products. 


Adobe Dreamweaver product home page: adobe.com/products/ 
dreamweaver.html has more information about the product. 


Adobe Authorized Training Centers 


Adobe Authorized Training Centers offer instructor-led courses and training 
on Adobe products. Go to training.adobe.com/training/partner-finder.html to find 
a directory of AATCs. 
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CUSTOMIZING YOUR 
WORKSPACE 


Lesson overview 

In this lesson, you'll familiarize yourself with the Dreamweaver 
(2020 release) program interface and learn how to do the following: 
e Use the program Welcome screen. 

e Switch document views. 

e Work with panels. 

e Select a workspace layout. 

e Adjust toolbars. 

e Personalize preferences. 

e Create custom keyboard shortcuts. 

e Use the Property inspector. 


e Use the Extract workflow. 


This lesson will take about 90 minutes to complete. To get the lesson files 
used in this lesson, download them from the webpage for this book at 
www.adobepress.com/DreamweaverC1IB2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 
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You'd probably need a dozen programs to perform 
all the tasks that Dreamweaver can do—and none of 
them would be as fun to use. 
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® Note: Before you 
begin this lesson, down- 
load the lesson files and 
create a new website for 
lesson01 as described 

in the “Getting Started” 
section at the begin- 
ning of the book. 
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FAVORITE CITY TOURMA iis: Q 


Related Files interface 


Touring the workspace 


Dreamweaver is the industry-leading HyperText Markup Language (HTML) edi- 
tor, with good reasons for its popularity. The program offers an incredible array of 
design and code-editing tools. Dreamweaver offers something for everyone. 


Coders love the range of enhancements built into the Code view environment, and 
developers enjoy the program's support for a variety of programming languages 
and code hinting. Designers marvel at seeing their text and graphics appear in an 
accurate What You See Is What You Get (WYSIWYG) depiction as they work, sav- 
ing hours of time previewing their designs in browsers. Novices certainly appreci- 
ate the program's simple-to-use and power-packed interface. No matter what type 
of user you are, if you use Dreamweaver, you don’t have to compromise. 


You’d think a program with this much to offer would be dense, slow, and unwieldy, 
but you'd be wrong. Dreamweaver provides much of its power via dockable panels 
and toolbars that you can display or hide and arrange in innumerable combinations 
to create your ideal workspace. In most cases, if you don’t see a desired tool or 


panel, you'll find it in the Window menu. 


dow be 


7) Book a Tour (6) Bargain Deals 
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F Document toolbar Files panel DOM panel 


G_ Visual Media Query 
(VMQ) interface 


Insert panel 


J 

K Assets panel 
L Scrubber 
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Code view 
H___Live/Design views ‘ ' 
9 CC Libraries panel Tag selectors 


! Workspace menu 


oO 
P 
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CSS Designer Property inspector 


The Dreamweaver interface features a vast array of user-configurable panels and toolbars. Take a 
moment to familiarize yourself with the names of these components. 


Customizing Your Workspace 


This lesson introduces you to the Dreamweaver interface and gets you in touch 
with some of the power hiding under the hood. We don’t spend a lot of time in the 
upcoming lessons teaching you how to perform basic activities within the interface; 
that’s the intention of this lesson. So take some time to go through the following 
descriptions and exercises to familiarize yourself with the basic operations of the 
program interface. Feel free to refer to this lesson anytime you need a refresher on 
the program’s many dialogs and panels and how they function. 


Using the Start Screen 


Once the program is installed and the initial setup is completed, you'll see the new 
Dreamweaver Start Screen. This screen provides quick access to recent pages, easy 
creation of a variety of page types, and a direct connection to several key Help 
resources. The Start Screen appears when you first start the program or when no 
other documents are open. The Start Screen has gotten a facelift in this version of 
Dreamweaver and deserves a quick review to check out what it offers. For example, 
it now has four main options: Quick Start, Starter Templates, a button for creating 
new files, and a button for opening existing ones. If you have never used the pro- 
gram before, the center of the Start Screen may prompt you to “Build a Website.” 


Recent 


NAME LAST OPENED + KIND 
Quick Start 


Starter Templates ; lesson01/cruises.html 34 seconds ago html 


lessonO1/tours, html 50 seconds ago 


lessonO1events.html 1 minute ago 
lesson01/about-us.htmt Iminute ago 


lesson01/contact-us.html 1 minute ago 


Once you create or open your first file, Dreamweaver will provide a list of the files 
you last worked on. The list is dynamic, and the last file you worked on will be at 
the top of the list. To reopen a file, simply click its name. 
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Quick Start 


If the Quick Start tab looks familiar, it’s because it has been around in one form 
or another for many versions of Dreamweaver. As it has always done, it provides 
instant access to a list of basic web-compatible file types, such as HTML, CSS, JS, 
PHP, and so on. Just click the file type to start a new document. 


Home 


Learn 


oe Sd be xX 
Quick Start te : f } <)> 


Starter Templates 


Bootstrap CSS Document HTML Document 


Starter Templates 


The Starter Templates option enables you to access predefined starter templates 
that provide responsive styling to support smartphones and mobile devices, as well 
as the popular Bootstrap framework. The templates can be used to quickly create 
from scratch a variety of webpages that are already compatible with smartphones 
and tablets. 


Home 


Learn 
YOUR WORK 
Quick Start 


Starter Templates 


Basic - Multi column ‘Basic - Simple grid Basic - Single page 


Create New and Open 


The Create New and Open buttons access the New Document and Open dialogs, 


respectively. Previous users of Dreamweaver may be more comfortable using these 
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options, which open familiar interfaces for creating new documents or opening 
existing ones. 


on0i/tours.html 15 minutes ago html 


Create New... 


cena) 


on0Vevents.html 16 minutes ago html 


onOl/about-us.html 16 minutes ago html 


If you do not want to see the Start Screen anymore, you can disable it by accessing 
the option in the General settings in Dreamweaver Preferences and deselecting the 
checkbox. 


Exploring the New Feature guides 


In Dreamweaver, the New Feature guides pop up from time to time as you access 
various tools, features, or interface options. The pop-ups call your attention to new 
features or workflows that have been added to the program and provide handy tips 
to help you get the most out of them. 


chea 


Bootstrap 4 Support g 


Customize Toolbar 


a 


When a tip appears, it may provide more extensive information or a tutorial you 
can access by following the prompts in the pop-up window. When you are finished, 
you can close the pop-up by clicking the Close icon in the upper-right corner of 
each tip. When you close the tip, it will not appear again. You can display the tips 
again by selecting Help > Reset Contextual Feature Tips. 
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> 3) lesson0l 


> a images 
</> events.htm! 
<I> tours.html 
<> cruises.htm 


<> contact-us. 8 
</> about-us.ht 


{} 


Site - lesson01... 


Folder 
Folder 
HTML File 


New File 


Setting interface preferences 


Dreamweaver provides users with extensive controls over the basic program inter- 
face. You can set up, arrange, and customize the various panels and menus to your 
own liking. One of the first places you should visit before you begin the lessons in 


this book is the Dreamweaver Preferences dialog. 


As with other Adobe applications, the Preferences dialog provides specific settings 
and specifications that dictate how the program looks and functions. Preference 
settings are normally persistent, meaning that they remain in effect even after the 
program is shut down and relaunched. There are far too many options in this dialog 
to cover in one lesson, but let’s make a couple of changes to give you a taste of what 
you can do. Some features of the program are not visible until you create or open a 
file for editing. 


1 Define a new site based on the lesson01 folder as described in the “Getting 
Started” section at the beginning of the book. 


2 Select Window > Files or press F8 to display the Files panel, if necessary. 


Files CC bi es insert. CSSD: 


a } £3 lesson01 


D 


~ la@ Site - lesson0l... F 11/6/19 2:34 AM 
favorite-sty... a 10/31/ $8. AM 


css Folder 10/2/19 8:18 PM 
images Folder 19 2:37 AM 
js Folder {2/ 18 PM 
Templates Folder 

about-us.ht... HTML File 

contact-us.... HTML File 

cruises.html HTML File 

events.html HTML File r 

tours. html HTME Fite L1/2/19:3:03 PM 


3 In the Files panel, select lesson01 from the dropdown menu and reveal the site 
file list in the panel, if necessary. 


4 Right-click the file tours.html from the lesson01 folder 
and choose Open from the context menu. You can also 


double-click a file in the list to open it. 
ified 4 
11/6/19 2:34 AM The file opens in the document window. If the pro- 


11/6/19 2:37 AM a . : 
ees gram has not been used previously, the file may open in 


rire sen on Live view. To get the full appreciation of the upcoming 


New Folder changes, let’s also display the code-editing interface at 


. he ‘With 


the same time. 
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Select Split view at the top of the document window, if necessary. 


©. tours.humt 


Source Code boots: 


‘col-12"> 
arouselExampleControls 


s="carousel-indicators'> 


carouselExampleContrals” 
carouselExampleContro! 
carouselExampleControls” 


="carousel slide” 


HTML ov 951 x 244 


If you did not complete the “Getting Started” section at the beginning of the 


book, you will see that Dreamweaver may be sporting a new dark color scheme 


in Code view. Some users love it; some hate it. You can change it completely 


or merely tweak it in Preferences. If you have already changed your interface 


theme, skip to the next exercise. 


In Windows, select Edit > Preferences. 


In macOS, select Dreamweaver > Preferences. 


The Preferences dialog appears. 


Select the Interface category. 


Hide Others 
Show All 


Hide Dreamweaver 


Quit and Keep Windows \#Q 


Category 


General 


Code Hints 


Code Rewriting Code Theme: 


Copy/Paste 
CSS Styles 
Extract 


File Compare 

File Types / Editors 
Fonts 

Git 

Highlighting 
In-App Updates 


interface h 
Invisible Elements 


Preferences 


— om (O's 
Code Format | — 


Name 

Classic 

Dark 

Light 

Monaki 

Raven Dark 
Solarized Light 


As you see in the dialog, Dreamweaver gives you control over the overall color 


theme as well as the code-editing window. You may change one or both. 
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Many designers work in controlled lighting environments and prefer the dark 
interface themes that are now the default in most Adobe applications. For the 
purposes of this book, all screen shots from this point forward are taken in the 
lightest theme. This saves ink during printing, for less impact on the environ- 
ment. You may continue to use the Dark theme, if you prefer, or switch now so 
that your screen will match the illustrations in the book. 


8 Inthe App Theme window, select the lightest theme. 


The theme of the entire interface changes to light gray. You will notice that the 
Code Theme setting changes to Light at the same time. If you prefer, you can 
switch the code theme back to Dark or choose another. The screen shots for 
code editing in the book use the Classic theme. 


9 Select Classic in the Code Theme dropdown, if necessary. 


__ Preferences ; ae : : os) so Reolerences 


interface 


App Theme 0 yo 


Code Theme: Name 


eos ee [| CJ a EN 
ame : 


© NAINE 
Classic : [Classic Bi 
Dark i ? ; | Dark | 
Light | | Light 
Monaki : | Monaki 
Raven Dark Raven Dark 
Solarized Light i = Solarized Light 


At the moment, the changes are not permanent. If you were to click the Close 
button in the dialog now, the theme would revert to back to the original theme. 


10 Click Apply in the lower-right corner of the dialog. 
The changes have now been applied permanently. 
11 Click Close. 


Saved preferences persist from session to session and through each workspace. 


Switching and splitting views 


Dreamweaver offers dedicated environments for coders and designers. 


Code view 


Code view focuses the Dreamweaver workspace exclusively on the HTML code and 
a variety of code-editing productivity tools. To access Code view, click the Code 
view button in the Document toolbar. 
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Code view 


Code Split Live v 
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Design view 


Design view shares the document window with Live view and focuses the Dream- 
weaver workspace on its classic WYSIWYG editor. In the past, Design view 
provided a reasonable facsimile of the webpage as it would appear in a browser, but 
with the advancements in CSS and HTML, it is no longer as WYSIWYG as it once 
was. Although it can be difficult to use in some situations, you'll find that it does 
offer an interface that speeds up the creation and editing of your content. And at 
the moment, it’s also the only way to access certain Dreamweaver tools or work- 
flows, as you will see in the upcoming lessons. 


To activate Design view, choose it from the Design/Live view dropdown menu in 
the Document toolbar. Click Design again to activate the view. Most HTML ele- 
ments and basic cascading style sheets (CSS) formatting will be rendered properly 
within Design view, with the major exceptions being CSS3 properties; dynamic 
content; interactivity, such as link behaviors, video, audio, and jQuery widgets; and 
some form elements. In previous versions of Dreamweaver, you spent most of your 
time in Design view. That will no longer be the case. 


ooe Code Split Design fae Design view 
% tours.btmt Live 
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Live view 
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Live view 


Live view is the default workspace of Dreamweaver. It speeds up the process of 
developing modern websites by allowing you to visually create and edit webpages 
and web content in a browser-like environment, and it supports and previews most 


dynamic effects and interactivity. 


To use Live view, choose it from the Design/Live view dropdown menu in the 
Document toolbar. When Live view is activated, most HTML content will function 
as it would in an actual browser, allowing you to preview and test most dynamic 
applications and behaviors. 


In previous versions of Dreamweaver, the content in Live view was not editable. 
That has changed. You can edit text, add and delete elements, create classes and 
ids, and even style elements, all in the same window. It’s like working on a live web- 
page right inside Dreamweaver. 


Live view is integrally connected to the CSS Designer, allowing you to create and 
edit advanced CSS styling and build fully responsive webpages without having to 
switch views or waste time previewing the page in a browser. 


eee Code Split Live Ee 


* ours.heml pv Live; 


Design 


Split view 


Split view provides a composite workspace that gives you access to both the design 
and the code simultaneously. Changes made in either window update in the other 
in real time. 


® Note: Split view can pair Code view with either Design view or Live view. 


To access Split view, click the Split view button in the Document toolbar. Dream- 
weaver splits the workspace horizontally by default. When using Split view, you can 
display Code view with either Live view or Design view. 
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Code Spit Live v 
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You can split the screen vertically by selecting the Split Vertically option on the 
View menu. When the window is split, Dreamweaver also gives you options for 
how the two windows display. You can put the code window on the top, bottom, 
left, or right. You can find all these options in the View menu. Most screen shots in 
the book that show Split view show Design or Live view at the top or left. 


Code 
eee . ~‘e Split Live + 
| eae Sa ¥ Code-Live : / Se 
* tours.html View Mode > Code-Design ca 
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Code View Options 


Live Code mode 


Live Code is an HTML code-troubleshooting display mode available whenever Live 
view is activated. To access Live Code, activate Live view and then click the Live 
Code icon in the Common toolbox at the left side of the document window. 
While active, Live Code displays the HTML code as it would appear in a live 
browser on the internet and gives you a peek at how the code changes when the 
visitor interacts with various parts of the page. 


You can see this interaction firsthand by Ctrl-clicking/Cmd-clicking one of the 
three indicators in the image carousel in Live view. In Code view, the window will 
focus on the <ol> element that provides those controls. You will see that one of the 
controls shows the class active and that the class is then added to the code inter- 
actively each time you click a different indicator. Without Live Code mode, you 
would not be able to see this interaction and behavior, and it would make trouble- 
shooting CSS errors more difficult. 


Split view (horizontal) 


Split view (vertical) 


® Note: The Live Code 
icon may not appear on 
the Common toolbar by 
default. You may need 
to activate it using the 
Customize Toolbar icon. 
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Be aware that while Live Code is active, you will not be able to edit the HTML 
code, although you can still modify external files, such as linked style sheets. To 
disable Live Code, click the Live Code icon again to toggle the mode off. 


Inspect mode 


Inspect mode is a CSS troubleshooting display mode that is available whenever 
Live view is activated. It is integrated with the CSS Designer and allows you to 
rapidly identify CSS styles applied to content within the page by moving the mouse 
cursor over elenients in the webpage. Clicking an element freezes the focus on 

that item. 


The Live view window highlights the targeted element and displays the pertinent 
CSS rules applied or inherited by that element. You can access Inspect mode at any 
time by clicking the Live view icon whenever an HTML file is open and then click- 
ing the Inspect icon in the Common toolbar. 


Inspect mode eee 


Code Split Live v 
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Selecting a workspace layout 


A quick way to customize the program environment is to use one of the prebuilt 
workspaces in Dreamweaver. Experts have optimized these workspaces to put the 
tools you need at your fingertips. 


Dreamweaver (2020 release) includes two prebuilt workspaces: Standard and 
Developer. To access these workspaces, choose them from the Workspace menu, 
located at the upper-right side of the program window. 


Standard workspace 


The Standard workspace focuses the available screen real estate on the Design and 
Live view window. Standard is the default workspace for screen shots in this book. 
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Developer workspace 


The Developer workspace provides a code-centric layout of tools and panels ideal 
for coders and programmers. The workspace is focused on Code view. 


‘eee Developer workspace 
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> @ js Folder <div class="carousel-item”> <img src="images/london-tour-carousel.jpg” alt="First slide” 
> B es Folder lase="d-block w-100"> 


div ="carousel-caption d-none d-md-block"> 
<hS>London Tea</h5> 
p>High tea and high adventure In London towne</p> 
</div> 
</div 
<div class="carousel-item active"’> <img s1c="images/venice-tour-carousel.jpq” alt="Second 
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Working with panels 


Although you can access most commands from the menus, Dreamweaver scatters 
much of its power in user-selectable panels and toolbars. You can display, hide, 
arrange, and dock panels at will around the screen. You can even move them to a 
second or third computer display if you desire. 
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The Window menu lists all the panels available in the program. If you do not see 

a desired panel on the screen, choose it from the Window menu. A checkmark 
appears next to its name in the menu to indicate that the panel is open and visible. 
Occasionally, one panel may lie behind another on the screen and be difficult to 
locate. In such situations, simply choose the desired panel from the Window menu 
and the panel will rise to the top of the stack. 


Minimizing panels 


To create room for other panels or to access obscured areas of the workspace, 
you can minimize or expand individual panels in place. To minimize a standalone 


panel, double-click the tab containing the panel name. To expand the panel, click 
the tab once. 


Minimizing a panel by 5 See 
double-clicking its tab ‘ 
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To recover more screen real estate, you can minimize panel groups or stacks down 
to icons by double-clicking the bar appearing at the top of the panel. You can also 
minimize the panels to icons by clicking the double-arrow icon (>>) in the panel 
title bar. When panels are minimized to icons, you access an individual panel by 
clicking its icon. The selected panel will appear on the left or right of the icon, 
wherever room permits. 


er z Collapsing a panel 
Files CC Libraries Insert CSS Designer ah wy to icons 


Collapse to Icons Files Expand Panels 


Form v 
iS oForm ) CC Libraries 
{J Tex insert 
FA Email CSS Designer 
DOM Assets Snippets 
Images: site © Favorites a DOM 
aa 
| Assets 
g Bly Snippets 
& <> 
8 
Type Name Dimensions Size 
lad book.jpg 40x40 2KB 
jad chicago-tour.jpg 400x200. 31KB 
fad elaine.jpg 100x125 36Ke 
faa eric.jpg 100x125 6KB 
laa favcity-logo.jpg 933x166 SOKB 
“ : 


Cc & +A 


Closing panels and panel groups 


Each panel or panel group may be closed at any time. You can close a panel or 
panel group in several ways; the method often depends on whether the panel is 


floating, docked, or grouped with another panel. 
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To close an individual panel that is docked, right-click in the panel tab and choose 
Close from the context menu. To close an entire group of panels, right-click any tab 
in the group and choose Close Tab Group. 
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To close a floating panel or panel group, click the Close icon that appears in the 


upper-right corner of the panel in Windows or in the left corner of the title bar 


of the panel or panel group in macOS. To reopen a panel, choose the panel name 


from the Window menu. Reopened panels will sometimes appear floating in the 


interface. You may use them this way or attach, or dock, them to the sides, top, or 


bottom of the interface. You will learn how to dock panels later. 


Dragging 


You can reorder a panel tab by dragging it to the desired position within the group. 
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Dragging a tab to change its position 


Floating 


A panel that is grouped with other panels can be floated separately. To float a panel, 
drag it from the group by its tab. 
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Pulling a panel out by its tab 
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To reposition panels, groups, and stacks in the workspace, simply drag them by the 


title bar. To pull out a single panel group when it’s docked, grab it by the tab bar. 
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Grouping, stacking, and docking 


You can create custom groups by dragging one panel into another. When you’ve 
moved the panel to the correct position, Dreamweaver highlights the area, called 
the drop zone, in blue. Release the mouse button to create the new group. 
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In some cases, you may want to keep both panels visible simultaneously. To stack 
panels, drag the desired tab to the top or bottom of another panel. When you see 
the blue drop zone appear, release the mouse button. 
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Creating panel stacks 
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Saving a custom 


Floating panels can be docked to the right, left, or bottom of the Dreamweaver 
workspace. To dock a panel, group, or stack, drag its title bar to the edge of the 
window on which you wish to dock it. When you see the blue drop zone appear, 


release the mouse button. 


workspace 
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Docking panels 


Personalizing Dreamweaver 


As you continue to work with Dreamweaver, you'll devise your own optimal work- 
space of panels and toolbars for each activity. You can store these configurations in 
a custom workspace of your own naming. 


Saving a custom workspace 


To save a custom workspace, create your desired configuration of panels, choose 
New Workspace from the Workspace menu, and then give it a custom name. 
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<P index.htmt 
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Working with toolbars 


Some program features are so handy you may want them to be available all the time 
in toolbar form. Two of the toolbars—Document and Standard—appear horizon- 
tally at the top of the document window. The Common toolbar, however, appears 
vertically on the left side of the screen. You can display the desired toolbar by 
choosing it from the Window menu. 


Customizing Your Workspace 


Document toolbar 


The Document toolbar appears at the very top of the program interface and 
provides onscreen commands for switching between Live, Design, Code, and Split 
views. The toolbar is open by default. If it’s not, you can enable this toolbar by 
selecting Window > Toolbars > Document when a document is open. 


Document toolbar 


Code 


opper.min.js ere Desion 


Split 


‘avorite~styles.css jquery~3.3.1.min.js 


Standard toolbar 


The Standard toolbar is an optional toolbar that appears between the Related Files 
interface and the document window and provides handy commands for various 
document and editing tasks, such as creating, saving, or opening documents; copy- 
ing, cutting, and pasting content; and so on. The toolbar is not open by default. 
You can enable it by selecting Window > Toolbars > Standard when a document 

is open. 


Standard toolbar 
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Common toolbar 


The Common toolbar appears on the left side of the program window and provides 
a variety of commands for working with code and HTML elements. The toolbar 
displays six tools by default in Live or Design view, but insert the cursor in the code 
window and you may see several more. 


The Common toolbar was named the Coding toolbar in a previous version of 
Dreamweaver, and it is now user customizable. You can add and remove tools by 
clicking the Customize Toolbar icon ***. Be aware that some tools will be displayed 
and active only when using the Code view window. 


x tours,html Customize Toolbar Common toolbar 
and dialog 
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show all options in the toolbar. 
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® Note: The default 
keyboard shortcuts 


are locked and cannot 
be edited. But you can 1 Choose Edit > Keyboard Shortcuts (Windows) or Dreamweaver > Keyboard 


duplicate the set, save it 


Creating custom keyboard shortcuts 


Another powerful feature of Dreamweaver is the ability to create your own key- 
board shortcuts as well as edit existing ones. Keyboard shortcuts are loaded and 
preserved independently of workspaces. 


Is there a command you can’t live without that doesn’t have a keyboard shortcut or 


uses one that’s inconvenient? Create one of your own. 


under a new name, and 
modify any shortcut 


within that custom set. 
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Commands: 


Current set 


Shortcuts (macOS). 


You cannot modify the default shortcuts, so you have to create a list of 


your own. 


2 Click the Duplicate Set icon to create a new set of shortcuts. 
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3 Enter a name in the Name Of Duplicate Set field. Click OK. 


4 Choose Menu Commands from the Commands pop-up menu. 


5 Inthe Commands window, choose File > Save All. 


Keyboard Shortcuts 
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Commands. 
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Keyboard Shortcuts 


Current set My Shortcuts 


Commands: Menu 
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Open Recent 

Close 

Close All 

Save 

Save AS... 

Save All 

Save All Related Files 
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Cmd+0 


Cad+Ww 
Cmd+Shift+w 
Cmd+s 
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Note that the Save All command does not have an existing shortcut, although 
you'll use this command frequently in Dreamweaver. 


6 Insert the cursor in the Press Key field. 
Press Ctrl+Alt+S (Windows) or Cmd+Opt+S (macOS). 
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Save Cmd+S 
Save As... Cmd+Shift+s 
Save Al) 


Shortcuts: fe 


Press key. Cmd+Opt+S { Change _) 


& This shortcut is already assigned to "Add CSS Selector." 


Note the error message indicating that the keyboard combination you chose is 
already assigned to a command. Although we could reassign the combination, 
let’s choose a different one. 


7 Press Ctrl+Alt+S (Windows) or Ctrl+Cmd+S (macOS). 


This combination is not currently being used, so let’s assign it to the Save All 


command. 


8 Click the Change button. 


Close All Cmd+Shift+W 
Save Cmd+S f 
Save As... Cmd+Shift+S 
Save All < 


Shortcuts: f= = 


Press key: Ctrl+Cmd+S ( Change 


The new shortcut is now assigned to the Save All command. 
9 Click OK to save the change. 


You have created your own keyboard shortcut—one you can use in upcoming 
lessons. Whenever an instruction in one of the lessons says “save all files,’ use this 


keyboard shortcut. 


Using the Property inspector 


One tool vital to your workflow and many of the exercises in this book is the Prop- 
erty inspector. In the predefined Dreamweaver workspaces, the Property inspector 
is no longer a default component. If it is not visible in your program interface, you 
can display it by selecting Window > Properties and then dock it to the bottom 

of the document window, as described earlier. The Property inspector is context- 


driven and adapts to the type of element you select. 
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HTML Property 
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CSS Property inspector 


Image Property 
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Table Property 
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Using the HTML tab 


Insert the cursor into any text content on your page and the Property inspector pro- 
vides a means to quickly assign basic HTML codes and formatting. When the HTML 
button is selected, you can apply heading or paragraph tags as well as bold, italics, 
bullets, numbers, and indenting, among other formatting and attributes. The Docu- 
ment Title metadata field is also available in the bottom half of the Property inspector. 
Enter your desired document title in this field, and Dreamweaver adds it automati- 
cally to the document <head> section. If you don't see the full Property inspector, 
click the triangle icon in the lower-right corner of the panel to expand its display. 


Properties 
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Accessing image properties 


Select an image in a webpage to access the image-based attributes and formatting 
controls of the Property inspector. 
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Accessing table properties 


To access table properties, insert your cursor in a table and then click the table tag 
selector at the bottom of the document window. Once the Element Display appears 
on the table, click the Format Table icon 1 and the Property inspector will display 
the table specifications. 


Properties see 


Table ADK j spree snc 
ale Rows 22 WwW pixels -~ _CellPad Align Default ¥ Class (None v) 


festi... ¥ Cols 3 


CeliSpace Border 0 


to 4 ud (Fe) 


Te 


Customizing Your Workspace 


Using the Related Files interface 


Webpages are often built with multiple external files that provide styling and 
programming assistance. Dreamweaver enables you to see all the files linked to, 

or referenced by, the current document by displaying the filenames in the Related 
Files interface at the top of the document window. This interface displays the name 
of any external file and will actually display the contents of each file—if the contents 
are available—when you simply select the filename in the display. The Related Files 
interface displays by default when any web-type file is open. If you do not see it, 
you can enable it by choosing View > Related Files Options > Display External Files. 


® tours.html 


Source Code bootstrap-4.3.1.css favorite-styles.css jquery-3.3.1.minjs popper.min.js bootstrap-4.3.1.js S¢ 


To view the contents of the referenced file, click the name. Dreamweaver splits the 
document window and shows the contents of the selected file in the Code view 
window. If the file is stored locally, you'll even be able to edit the contents of the file 
when it’s selected. 
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To view the HTML code contained within the main document, click the Source 


Code option in the interface. 
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The Related Files 
interface lists all 
external files linked 
to a document. 


Use the Related Files 
interface to edit locally 
stored files linked to the 
webpage. 


Choose the Source 
Code option to see the 
contents of the main 
document. 
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Use the tag selectors to 
select elements. 
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Using tag selectors 


One of the most important features of Dreamweaver is the tag selector interface 
that appears at the bottom of the document window. This interface displays the 
tags and element structure in any HTML file pertinent to the insertion point of, 
or that is selected by, the cursor. The display of tags is hierarchical, starting at the 
document root at the left of the display and listing each tag or element in order 
based on the structure of the page and the selected element. , 
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ites 


The display in the tag selector interface mimics the structure of the HTML code based on your 
selection. 


The tag selectors also enable you to select any of the displayed elements by simply 
clicking a tag. When a tag is selected, all the content and child elements contained 
within that tag are also selected. 
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The tag selector interface is closely integrated with the CSS Designer panel. You 
may use the tag selectors to help you style content or to cut, copy, paste, and 
delete elements. 
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=4.3, 1.35 fayorite-styles.css iquery-3,3.1.minjs popper.minjs beotstrap-4.3, Alt 


+ Sources Properties 
B pootstrap-4.3.1.cs8 (Read Only) > & 


i Connputedt 


Besta 


ul.navbernay 


Mainer div #eavbarSupportedContent. collapse.naybar-collapse © navbar-nav. 


amr-euto, .maxaute 


Navbarnav 
XX None - Class EC ie Re 2) Risser: : of, ot, dt 
i 4&4 sc 
D None v nk index.html - O68 Rerget we ze Deir, Ss atiee 
Pneingeantemeoen Oe eens : x Sposa oasconsmcncemetrenin ertesaseron ee Aevberexpand-ig .navbar-collapse 
fe Qur Favorite Tours = Favorite City Tour LISE Thee Current Mode: Lists rules for current selection 


The tag selector is closely integrated with the styling and editing of elements. 


Using the CSS Designer 


The CSS Designer is a powerful tool for visually inspecting, creating, editing, and 
troubleshooting CSS styling. The panel adapts to the size of the available workspace 
and displays in either a one-column or two-column layout. 


>» >» 
Files CC Libraries insert CSS Designer & Files CC Libraries insert CSS Designer Be 
4 Alt Current All Current 
+ Sources + Sources Properties 
bootstrap-4.3.1.css ( Read Only ) bootstrap-4.3.1.css (Read Onl... Show Set 


" favorite-styles.css 


@Qress 


@Media : ( min-width : 992px } 


GLOBAL @Media: (min-width:... © 
& fex-direction < 
Selectors GLOBAL 
Selectors 
COMPUTED ar CSS Rules 
avbar-expand-Ig .navbar-nav Se Se COMPUTED 


ul.navbar-nay _navbar-expand-lg .navbarsnav 


marist envtn 


The CSS Designer can be displayed in one or two columns. Simply drag the edge of the document 
window to the left or right until the panel displays the desired number of columns. 


CSS Designer also allows you to copy and paste CSS styles from one rule to 
another. You can also decrease or increase the specificity of new selector names by 
pressing the up arrow or down arrow key, respectively. 
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Files €C Libraries insert CSS Designer 


All Current 
Properties 
tf@a@ 

+ Ge Layout 


» margin 


+ Sources : favorite-styles.... + 
bootstrap-4.3.1.058 { Read Only ) 
favorite-styles.css. 


+ @Media : GLOBAL 
GLOBAL 


+ Selectors 


Go to Code cs 
pi,h2, CopyAliStyles 2,.h3,.. 
hi, 2 Copy Styljs > Copy Layout Styles 
*, *2b Paste Styles Copy Text Styles 
Cold, _ Duplicate i 
cow 
header 


article, aside, figcaption, figue rer Styles 
“T text-shadow 


“ail 


iN 


&@ Show Set 


files CC Libraries insert CSS Designer S| 
All. Current i 

Fete Sources : favorite-styles.... | au Properties 

botetron 43.1165 (Read Only) fa @ & (Show Set 

favoritesstylescss BB out 


+ @Media : GLOBAL i 
GLOBAL 
+ — Selectors 

P Fitter CSS Rules 

wbg-dark 

ul naybar-nay 

navbar-dark .mavbar-nav nav-link 


wnavbar-dark .navbernay .nav-link... 


Raybar-nav nayitem ; @ text 
-navbar-nav .nav-itemihover ' color : IE #eedd66 
itader __ font-family impact 


| font-size 
line-height 


header p text~shadow 


Copy and paste styles from one rule to another (left). Make selectors more or less specific by using 


The CSS Designer panel consists of four windows: Sources, @Media, Selectors, 


body 
the arrow keys (right). 
and Properties. 
Files CC libraries insert CSS Designer 
All Current 
ae ite se + Properties % 
ALL SOURCES fr] &] 
bootstrap-4.3.1.css_( Read Only ) 
SES reed ea eae RE eRe (r] Text 
_ favorite-styles.css 
color > BF inherit 
Files CC Libraries insert CSS Designer 
All Current 
+ — Sources Properties 
_ ALL SOURCES © oe fa El 
_ bootstrap-4.3.1.css ( Read Only ) 
favorite-styles.css 
@Media 
GLOBAL Bo 
}] ( min-width : $76px ) 
1 ( min-width : 768px ) flax 
{ ( min-width : 992px ) 
fl ( min-width ; 1200px ) 
| (min-width: 576px) 
| ( min-width ; 768px ) 


fC min-width : 
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Mit 


Show Set 


iM < 


Show Set 


Sources 


The Sources window allows you to create, 
attach, define, and remove internal embedded 
and external linked style sheets. 


@Media 


The @Media window is used to define media 


queries to support various types of media and 
devices. 


Selectors 


The Selectors window is used to create and edit 
the CSS rules that format the components and 
content of your page. Once a selector, or rule, is 
created, you define the formatting you wish to 
apply in the Properties window. 


In addition to allowing you to create and edit 


CSS styling, the CSS Designer can also be used to 
identify styles already defined and applied, and to 


troubleshoot issues or conflicts with these styles. 


Properties 


The Properties window features two basic modes. By default, the Properties 
window displays all available CSS properties in a list, organized in five catego- 
ries: Layout, Text, Borders, Background, and More. You can scroll down the 


files CC libraries insert CSS Designer 


All Current 
+ — Sources: favorite-styles....° + Properties 
+ @Media : GLOBAL 
+ -— Selectors es] More 
& Filfer CSS Rules 


header h2 
Ravbat-nav.mr-auto .nav-item na. 


header p 


list and apply styling as desired or click the icon to jump to that category of the 


Properties panel. 


Files CC Libraries insert CSS Designer 


All Current 
+ — Sources: favorite-styles.... + Properties 
bootstrap-4.3.1.css ( Read Only } ia fz] & @Z [3] 
LRTI 
_ favorite-s } 
Ba Layout 
+ @Media : GLOBAL width 108px 
GLOBAL height 
+ — Selectors min-width 
£ Fiher CSS Rules min-height 
bg-dark max-width 
x-heigh’ 
ul.navbar-nav AG 
display 
Navbat-dark .navbar-nav .nav-link 
tox-sizing 


-Navbar-derk .navbar-nav .nav-link... 


.navbar-nay .nav-item:hover 


margin 


header h2 
header h2 a:link, header h2 a:visited 


container nawhar-hrand 
All Mode: Lists rules for entire document 


" favorite-sty! 


» 


2 Show Set 


Pies CC Libraries insert CSS Designer 
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All Current 


+ - Sources: favorite-styles.... + 


bootstrap-4.3.1.css ( Read Only ) iB & [J 


Properties 


be @Media : GLOBAL 
GLOBAL 

+ — Selectors 
— Filer CSS Rules 

-bg-dark 

ul. navbar-nay 


-havbar-dark .navbar-nay .nav-fink 


Mavbar-Gark .navbar-nay .nav-fink... 
“snavbar-nay nav-item 

shavbar-nav .nay-item:hover {z] Text 

header h2 text-align ea 8 

header h2 astink, header h2 a:visited 


C5) earlier 


All Mode: Lists rules fer entire document 


eantainer navhar-hrand 


The second mode can be accessed by selecting Show Set at the upper-right edge 
of the window. In this mode, the Properties panel will filter the list down to 
only the properties actually applied to the rule chosen in the Selectors window. 
In either mode, you can add, edit, or remove style sheets, media queries, rules, 


and properties. 


The Properties panel also features a COMPUTED option that displays the aggre- 
gated list of styles applied to the selected element when the Current button in 
CSS Designer is selected. The COMPUTED option will then appear anytime you 
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Show Set option to see 
only the CSS properties 
applied within a rule. 


Show Set, 
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The COMPUTED option 
collects in one place 

all styles applied to the 
selection. 


When the Current but- 
ton is selected, the CSS 
Designer displays all the 
styling associated with 
a selected element. 


select an element or component on the page. When you're creating any type of 
styling, the code created by Dreamweaver complies with industry standards and 


best practices. 


files €C Libraries Insert CSS Designer = 
All Current 


+ Sources Properties 
bootstrap-4.3.1.css_( Read Only ) 


favorite-styles.css 


@Media aitinn 
GLOBAL color(hover) : [EM +000 
IC min-width : 992px ) lortfoes 
EC min-width ; 576px ) iorfnot) ee 
Selectors lanncat : Frat 
Bis Seedy, tint 
COMPUTED font-family : ‘Source Sans Pro’ 
= color : BP +o066s9 


< inlineSstyle ia 

sNavbar-dark .navbar-nav .nav-link... 
.pavbar-dark .naybar-nay .nav-link... 
a:not({href]):not{{tabindex]}):focus 
f): 


.navbar-dark .navbar-nay .nav-link 
Current Mode: Lists rules for current selection 


a:not({h 


not{[tabindex]}): hover... 


All and Current modes 


At the top of the CSS Designer panel are two buttons, All and Current, that enable 
specific functions and workflows within the panel. 


When the All button is selected, the panel allows you to create and edit CSS style 
sheets, media queries, rules, and properties. When the Current button is selected, 
the CSS troubleshooting functions are enabled, allowing you to inspect individual 
elements in a webpage and assess existing styling properties applied to a selected 
element. In this mode, however, you will notice that some of the normal features 

in the CSS Designer are disabled. For example, when in Current mode you are able 
to edit existing properties and add new style sheets, media queries, and rules that 
apply to the selected element, but you cannot delete existing style sheets, media 
queries, or rules. This interaction works the same way in all document view modes. 


Files CC libraries fasert CSS Designer 
juery-3.3,1.min.js popper.minjs bootstrap-4,3.1.js hy 
All Current 
{ Seuices ; favorite-styles.... + Properties 
EES bootstrap-4.3.i.css ( Read Only ) BHEABEA {7} Show See 


favorite-styles.css 


cs 
68 


+ @Media oan 
width 


M%, WAP ECE y) 


Guhl height 


1 ( min-width : 992px ) 


ECmin-width + S76px } 
+ Selectors 
COMPUTED cispiey 


box-sizing 


snavbar-nay inav-item:hover 


mavbar-nay .nay-item 


Current Mode: Lists 
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In addition to using the CSS Designer, you may also create and edit CSS styling 
manually within Code view while taking advantage of many productivity enhance- 


ments, such as code hinting and auto-completion. 


Using the Visual Media Query (VMQ) interface 


The Visual Media Query (VMQ) interface is a newer feature of Dreamweaver. 
Appearing above the document window, the VMQ interface allows you to visually 
inspect and interact with existing media queries, as well as create new ones on the 


fly using a simple point-and-click interface. 


Open any webpage that is formatted by a style sheet with one or more media 


queries, like tours.html. If necessary, enable the VMQ interface by toggling the 
VMQ icon = in the Common toolbar. The VMQ interface will appear above the 
document window and display color-coded bars that specify the type of media 


query that has been defined. Media queries using only a max-width specification 


will be displayed in green. Media queries using only a min-width specification will 


be displayed in purple. Ones that use both will be displayed in blue. 


Using the DOM Viewer 


The DOM Viewer allows you to view the Document 
Object Model (DOM) to quickly examine the structure 
of your webpage as well as interact with it to select, 
edit, and move existing elements and insert new ones. 
You'll find that it makes working in complex HTML 
structures simple. 


j 


in the VMQ interface 


in the VMQ interface 


Media using 
both max-width 
and min-width 
specifications 


Files CC Libraries insert CSS Designer 
DOM Snippets Assets 
v 
- | body> 
> [navy navbar .navbar-expand-lg .navbar-dark .bg-dark .fixed-top 
> header» TOW 
> divy container .mt-3 
(div, =4 
> oN, container mt 
BA > ERR warner 
insert Before — tainer .bg-dark .p-4 
Insert After 
Insert Child 
Wrap Tag 
[script> 
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Selectar 2 query 
Check out our elect a media query 


Using element dialogs, 
displays, and inspectors 


As Dreamweaver moves to make Live view the default workspace, it has driven the 
development of new methods for editing and managing HTML elements. You will 
find a handful of new dialogs, displays, and inspectors that provide instant access 
to important element properties and specifications. All of them, except the Text 
Display, allow you to add class or id attributes to the selected element and even 
insert references to those attributes into your CSS style sheets and media queries. 


Position Assist dialog 


The Position Assist dialog appears whenever new elements are being inserted in 
Live view, using either the Insert menu or the Insert panel. Typically, the Position 
Assist dialog will offer the options Before, After, Wrap, and Nest. Depending on 
what type of element is selected and what item is targeted by the cursor, one or 
more of the options may be grayed out. 


‘ The Position Assist dialog allows you to 
_ oe ie control how elements and components 
Rares | OAS: Wrap Nect are inserted in Live view. 

Element Display 


The Element Display appears whenever you select an element in Live view. When 
an element is selected in Live view, you can change the selection focus by pressing 
the up arrow and down arrow keys; the Element Display will then highlight each 
element in the page, in turn, based on its position in the HTML structure. 


The Element Display features a Quick Property Inspector icon | where you can 
instantly access properties such as formats, links, and alignment. The Element 
Display also allows you to add or edit a class or id on the selected element. 


Select a source 


OF a SE 
El eeconer Peron J] | sorma (ee 
Se Bley) 
favorite-styles.css . AVO} 


3} link efits B5 


LS oe 
ection. Y« 


Check out our 
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BOOTSTRAP 
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lil 
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The Element Display enables you to quickly apply classes, ids, and links, as well as perform basic 
formatting. 


Customizing Your Workspace 


Image Display 


The Image Display provides a Quick Property inspector from which you can access 
the image source, alt text, and width and height attributes; it also contains a field 
from which you can add a hyperlink. 


The Image Display 


Check out our latest favo C i i 
ed gives you quick access 
tee aes c to the image source 
sre | images/london-tour jp] © and allows you to add 
| alt Card image cap hyperlinks, as well as 
s . some Bootstrap options. 
width pone 9 i 
fy 
t height I 
—— SS Ge pce me er link undefined & 
| BOOTSTRAP | 
iil London Tea i 
: 


| Clip to Shape © (s) {} 


| 
| 


lf you have never experienced 
ea Make Image Responsive 


high tea, you need to take this 


=— 


Text Display 


The Text Display appears whenever you select a portion of text in Live view. The 
Text Display allows you to apply bold <strong>, italic <em>, and hyperlink <a> 
markup to the selected text. Click on text to open the orange editing box. When 
you select some text, the Text Display will appear. When you are finished editing 
the text, click just outside the orange box to complete and accept the changes. Press 
Esc to cancel the changes and return the text to its previous state. 


The Text Display lets 
you apply bold, italics, 
and hyperlink markup 
to selected text. 


Setting up version control in Dreamweaver 


Dreamweaver (2020 release) supports Git, a popular open source version control 
system for managing the source code of your websites. Such systems are very valu- 
able for preventing conflicts and loss of work when you have a number of people 
working together on a project. 


Before you do the first step in Dreamweaver you must create a Git account and 
set up a repository. For full instructions on how to set up Git version control 
go to https://helpx.adobe.com/dreamweaver/using/git-support.html for your 


own project. 
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Once you have a repository set up, you must connect it to your site in Dream- 
weaver. First, select the option to associate the site with a Git repository within 


your site definition dialog. 


i Site Setup for lesson01 


one A Drearnweaver site is a collection of ail of the files and assets you use in your 
Servers website. A Dreamweaver site usually has two parts: a local folder on your 
> CSS Preprocessars computer where you store and work on files, and a remote folder on a server 
> Advanced Settings where you post the same files to the web. 


| 
| 
! 
Here you'll select the local folder and a name for your Dreamweaver site. y 


Site Name: lesson01 


Local Site Folder: [/webs/DWCC2020/Lessons/lesson01 <a & 


(1) Associate a Git Repository with this site 


After that, click the Show Git View icon in the Files panel to toggle the Git panel. 


il 


Files CC Libraries insert CSS Designer 


bP > F3 lesson01 Y master v o  : 
Jo) 
Local Type Modified 
- esson0l (NewRo... Folder. —=—‘11/7/19 4:06 PM 
{}  favorite-styles.css CSS File 11/7/19 4:16 PM 
</> tours-test.htm! HTML File 11/7/19 4:16 PM 
[% .aitiqnore GITIGNORE F... 11/7/19 4:06 PM 


If you have not already configured a Git repository, Dreamweaver will prompt you 
to set up your Git credentials and the location of the repository. 


Add New Remote 


Name of new remote: pw2020 


URL of new remote: https://github.com/JMAIVALD/DW2020 
€2 Save Credentials 


Username: —JMAIVALD 


Password senehenescasusll = - iC 2 Test = 
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Test your credentials by clicking the Test button. 


Name of new remote: 


URL of new remote: 


DwW2020 


' ys Successfully connected to remote. 
: 
< 


Cita) 


C cancel _) 


Once activated, the Git panel will display the contents of your site, and you can 


push and pull changes as needed. 


Search Output Git 
° & GB 
Status 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 
Untracked 


Mintrarked 


Changed Files 
-gitignore 

Templates /favorite-temp.dwt 
about-us.html 
contact-us.html 
cruises.htmi 
css/bootstrap-4.3.1.css 
events. htm! 
favorite-styles.css 
images /100X125S.gif 
images /1920x500.gif 
images /400X200.gif 
images/bargain.jpg 


imanes/hank ing 


g 


0W2020 v 
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Exploring, experimenting, and learning 


The Dreamweaver interface has been carefully crafted over many years to make 
the job of webpage design and development fast and easy. It’s a design in progress, 
and it’s always changing and evolving. If you think you already know the program, 


you're wrong. Install the latest version and check it out. Feel free to explore and 


experiment with various menus, panels, and options to create the ideal workspace 
and keyboard shortcuts to produce the most productive environment for your own 
purposes. You'll find the program endlessly adaptable, with power to spare for any 


task. Enjoy. 
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Where can you access the command to display or hide any panel? 
Where can you find the Code, Split, Design, and Live view buttons? 
What can be saved in a workspace? 

Do workspaces also load keyboard shortcuts? 


What happens in the Property inspector when you insert the cursor into various 
elements on the webpage? 


What features in the CSS Designer make it easy to build new rules from existing ones? 
What can you do with the DOM Viewer? 
Does the Element Display appear in Design or Code view? 


What is Git? 


Customizing Your Workspace 


Review answers 4 


1 All panels are listed in the Window menu. 


2 ‘The Code, Split, Design, and Live view buttons are components of the Document 
toolbar. 


3 Workspaces can save the configuration of the document window, the open panels, and 
the panels’ size and position on the screen. 


4 No. Keyboard shortcuts are loaded and preserved independently of a workspace. 


5 ‘The Property inspector adapts to the selected element, displaying pertinent informa- 
tion and formatting commands. 


6 ‘The CSS Designer allows you to copy and paste styles from one rule to another. 


7 The DOM Viewer allows you to visually examine the DOM and select and insert new 
elements and edit existing ones. 


8 No. The Element Display is visible only in Live view. 


9 Git is an open source version control system that enables you to manage your website 
source code. 
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HTML BASICS 


Lesson overview 


In this lesson, you'll familiarize yourself with HTML and learn: 


What HTML is and where it came from 

Frequently used HTML tags 

How to insert special characters 

What semantic web design is and why it’s important 


New features and capabilities in HTML 


This lesson will take about 45 minutes to complete and does not have 


lesson files. 


Code Salt Live » 


Cenises Svons Contact Us About Us 


Developer «+ 


ay 8h files a-S3L.c8s  Grvortenstyfesess Quan E.E.Lninjs  poppermings — boutstrap-4.3-1 5 
: wy [Bly soizonts s="¢ontainer mt-3"> 
2 4 i “text-center">HERE ARE SOME OF OUR FAVORITE TOURS </h2> 

row text-center™> 

‘col-md-4 pb-1 pb-md-0"» 

“card? long class*"card-img-top" srcm*images/greek-Island-tour.jpg” ali"Card image cap"> 

="cafd-body"> 

=fard-title” Grecian Dreams</h3> 

=“ard-text">The warm placid waters of the Aegean are calling you, Came see the Greek isles for the first time, 

<ip> 

eM" class"btn btn-primary”>Get More Infa</a></div 


="col-md-4 pb-1 pb-md-0" 
“card <img chiss=*card-img-top" s1c="images/jacksonville-cruise.jpg” alts"Card image cap" > 


="card-body*» 
="card-title”>Floride Sunshine</h5> 
a*card-text” > Have you had your cose of sunshine today? Jacksonville will surprise at home much more it has to 


affe: > 
="#" class="btn btreprimary"» Get More Info< 


"col-md-4 pb-1 pb-md-0"> 
“card*> <img closs=*card-lmg-top™ sic="images/athens-tour,jpg* 4it="Card image cap™> 


ss="card-body*> 
osse"card-title”> Athenian Gold</hS> 
=card-text’ >Greece was the cradle of western civilization. Let us shaw you a side of it you've never seen 


before.</p> 
(="y* classs"btn btn-primary”>Get More Info</a></div> 


HTML 


HTML is the backbone of the web, the skeleton of 
your webpage. It is the structure and substance of the 
internet, although it is usually unseen except by the 
web designer. Without it, the web would not exist. 
Dreamweaver has many features that help you access, 
create, and edit HTML code quickly and effectively. 
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What is HTML? 


“\WW/hat other programs can open a Dreamweaver file?” asked a student in my 
Dreamweaver class. Although it might seem obvious to an experienced developer, 
it illustrates a basic problem in teaching and learning web design. Most people 
confuse the program with the technology. Some may assume that the extension 
.htm or .html belongs to Dreamweaver or Adobe. This isn’t as unusual as it seems. 
Print designers are used to working with files ending with extensions, such as .ai, 
.psd, .indd, and so on; it’s just a part of their jobs. They have learned over time that 
opening these file formats in a different program may be impossible, produce unac- 
ceptable results, or even damage the file. 


On the other hand, the goal of the web designer is to create a webpage for display 
in a browser. The power or functionality of the originating program has little bear- 
ing on the resulting browser display, because the display is all contingent on the 
HTML code and how the browser interprets it. Although a program may write 
good or bad code, it’s the browser that does all the hard work. 


The web is based primarily on HyperText Markup Language (HTML). The language 
and the file format don’t belong to any individual program or company. In fact, it 

is a non-proprietary, plain-text language that can be edited in any text editor, on 
any operating system, on any computer. Dreamweaver is, in part, an HTML editor, 
although it is also much more than this. But to maximize the potential of Dream- 
weaver, it’s vital that you have a good understanding of what HTML is and what 

it can (and can’t) do. This lesson is intended as a concise primer on HTML and its 
capabilities. It will be a helpful foundation for understanding Dreamweaver. 


Where did HTML begin? 


HTML and the first browser were invented in 1989 by Tim Berners-Lee, a com- 
puter scientist working at the CERN (Conseil Européen pour la Recherche 
Nucléaire, which is French for European Council for Nuclear Research) particle 
physics laboratory in Geneva, Switzerland. He intended the technology as a means 
for sharing technical papers and information via the fledgling internet that existed 
at the time. He shared his HTML and browser inventions openly as an attempt to 
get the scientific community at large and others to adopt them and engage in the 
development themselves. The fact that he did not copyright or try to sell his work 
started a trend for openness and camaraderie on the web that continues to this day. 


The internet before 
HTML looked more like 
MS DOS or the macOS 
Terminal application. 
There was no format- 
ting, no graphics, and 
no user-definable color. 


The language that Berners-Lee created 30 years ago was a much simpler construct 
of what we use now, but HTML is still surprisingly easy to learn and master. At 

the time of this writing, HTML is at version 5.2, officially adopted as of December 
2017. It consists of more than 120 tags, such as html, head, body, h1, p, and so on. 


The tag is inserted between less-than (<) and greater-than (>) angle brackets, as 

in <p>, <h1>, and <table>. These tags are used to identify, or mark up, text and 
graphics to signal the browser to display them in a particular way. HTML code is 
considered properly balanced when the markup features both an opening (<.. .>) 
and a closing (</...>) tag, such as <h1>...</h1>. 


When two matching tags appear this way, they are referred to as an element, which 
includes any contents contained within the two tags, as well. Empty, or void, ele- 
ments, like the horizontal rule, can be written in an abbreviated fashion using only 
one tag, such as <hr />, essentially opening and closing the tag at the same time. In 
HTML5, empty elements can also be validly expressed without the closing slash, 
such as <hr>. Some older web applications require the closing slash, so it’s a good 


idea to check before using one form over the other. 


Some elements are used to create page structures, others to structure and format 
text, and yet others to enable interactivity and programmability. Even though 
Dreamweaver obviates the need for writing most of the code manually, the ability 
to read and interpret HTML code is still a recommended skill for any burgeoning 
web designer. Sometimes it’s the only way to find an error in your webpage. The 
ability to read and understand code may also become an essential skill in other 
fields as more information and content is created and disseminated via mobile 


devices and internet-based resources. 
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HTML Basics 


Basic HTML code structure 


Here you see the basic structure of a webpage: 


Opening tag Closing tag 


<html> 


<head> 
Head x <title>HTML Basics for Fun and Profit</title> 


</head> 
Root <body> 
<h1>Welcome to my first webpage</h1> 
Bo) <hr> 
</body> 
</html> ae rule (empty tag) 


You may be surprised to learn that the only text from all this code that displays 

in the web browser is “Welcome to my first webpage”. The rest of the code creates 
the page structure and text formatting. Like an iceberg, most of the content of the 
actual webpage remains out of sight. 


Frequently used HTML elements 


HTML code elements serve specific purposes. Tags can create distinct objects, 
apply formatting, identify content semantically, or generate interactivity. Tags that 
make their own space on the screen and stand alone are known as block elements; 
the ones that perform their duties within the flow of another tag are known as 
inline elements. Some elements can also be used to create structural relationships 
within a page, like stacking content in vertical columns or collecting several ele- 
ments together in logical groupings. Structural elements can behave like block or 
inline elements or do their work entirely invisible to the user. 


HTML tags 


Table 2.1 shows some of the most frequently used HTML tags. To get the most 
out of Dreamweaver and your webpages, it helps to understand the nature of these 
elements and how they are used. Remember that some tags can serve multiple 
purposes. 


Table 2.1 Frequently used HTML tags 


TAG 


<a> 


<blockquote> 


<body> 


<br> 


<div> 


<em> 


<form> 


<h1> to <h6> 


DESCRIPTION 


Comment. Designates an HTML comment. Allows you to add notes 
within the HTML code (represented by ... in the tag) that are not 
displayed within the browser. 


Anchor. The basic building block for a hyperlink. 


Quotation. Creates a standalone, indented paragraph identifying content 
quoted from another source. 


Body. Designates the document body. Contains the visible portions of 
the webpage content. 


Break. Inserts a visual line break without creating a new paragraph. 


Division. Generic HTML container used to divide webpage content into 
discernible sections. 


Emphasis. Adds semantic emphasis. Displays as italics by default in most 
browsers and readers. 


Form. Designates an HTML form. Used for collecting data from visitors. 


Headings. Creates headings. Default formatting is bold. 


<head> Head. Designates the document head. Contains code that performs 
background functions, such as meta tags, scripts, styling, links, and 
other information not overtly visible to site visitors that may provide 
instructions on how to display the page or its contents. 

<hr> Horizontal rule. Empty element that generates a horizontal line. 

<html> Root element of most webpages. Contains the entire webpage, except in 
certain instances where server-based code must load before the opening 
<html> tag. 

<iframe> Inline frame. A structural element that can contain another document or 
load content from another website. 

<img> Image. Provides the source reference to display an image. 

<input> Input. An input element for a form such as a text field. 

<li> List item. An element within an HTML list. 

<Link> Link. Designates the relationship between a document and an external 


resource. 
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TAG DESCRIPTION 

<meta> Metadata. Additional information provided for search engines or other 
applications. 

<ol> Ordered list. Defines a numbered list. List items display in an alpha, 
numeric, or roman numeral sequence. 

<p> Paragraph. Designates a standalone paragraph. 

<script> Script. Contains scripting elements or points to an internal or external 
script. 

<span> Span. Designates a section within an element. Provides a means to apply 
special formatting or emphasis to a portion of an element. 

<strong> Strong. Adds semantic emphasis. Displays as bold by default in most 
browsers and readers. 

<style> Style. Embedded or inline element or attribute containing CSS styling. 

<table> Table. Designates an HTML table. 

<td> Table data. Designates a table cell. 

<textarea> Text area. Designates a multi-line text input element for a form. 

<th> Table header. Identifies a table cell containing a header. 

<title> Title. Contains the metadata title reference for the current page. 

<tr> Table row. Structural element that delineates one row of a table 
from another. 

<ul> Unordered list. Defines a bulleted list. List items display with bullets 


by default. 


HTML character entities 


Text content is normally entered via a computer keyboard. But many characters 
don’t appear on a typical 101-key input device. If a symbol can’t be entered directly 
from the keyboard, it can be inserted within the HTML code by typing the name or 
numeric value for the entity. Entities exist for every letter and character that can be 
displayed. Some popular entities are listed in Table 2.2. 


® Note: Some entities can be created using either a name or a number, as in the copyright symbol, 
but named entities may not work in all browsers or applications. So either stick to numbered entities 
or test the specific named entities before you use them. 


Table 2.2 HTML character entities 


CHARACTER DESCRIPTION NAME NUMBER 

© Copyright &copy; &#169; 

© Registered eat &reg; &#174; 

i Teenie y &#153; 

. Bullet &#149; 

- En dash a &#8211; 

— Em dash &#82 12; 
Nonbreaking space | &nbsp; &#160; 


Go to www.w3schools.com/html/html_entities.asp to see a complete list and 
description of entities. 


What’s new in HTMLS5 


Every new version of HTML has made changes to both the number and the pur- 
pose of the tags that make up the language. HTML 4.01 consisted of approximately 
90 tags. HTMLS has removed some HTML 4 tags from its specification altogether, 
and some new ones have been adopted or proposed. 


Changes to the list usually revolve around supporting new technologies or different 
types of content models, as well as removing features that were bad ideas or ones 
infrequently used. Some changes simply reflect customs or techniques that have 
been popularized within the developer community over time. Other changes have 
been made to simplify the way code is created, to make it easier to write and faster 
to disseminate. 


HTMLS5 tags 


Table 2.3 shows some of the important new tags in HTML5. The specification 
features nearly 50 new tags in total, while at least 30 old tags were deprecated. As 
we move through the exercises of this book, you will learn how to use many of 
these new HTMLS5 tags, as appropriate, to help you understand their intended role 
on the web. Take a few moments to familiarize yourself with these tags and their 


descriptions. 


Go to www.w3schools.com/tags/default.asp to see the complete list of HTML5 


elements. 
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Table 2.3 Important new HTMLS tags 


LESSON 2. HTML Basics 


TAG DESCRIPTION 


<article> Article. Designates independent, self-contained content that can be 
distributed independently from the rest of the page or site. 


re Aside. Designates sidebar content that is related to the surrounding content. 

<audio> Ate ts menace content, sounds, music, or other audio 
streams. 

rare ; ate Decent graphics content created using a script. 

a gure> ret nee a section of standalone content containing an illustration, 


image, or video. 


<figcaption> Figure caption. Designates a caption for a <figure> element. 


<footer> Footer. Designates a footer of a document or section. 


<header> Header. Designates a section of the content that introduces a document or 
specific topic area. 


<hgroup> Heading group. Designates a set of <h1> to <h6> elements when a heading 
has multiple levels. 


<main> Main. Designates the unique content of a page. A page may have only one 
main element. 


<nav> Navigation. Designates a section containing a navigation menu or hyperlink 
group. 
<picture> Picture. Designates one or more resources for a webpage image to support 


the various resolutions available on smartphones and other mobile devices. 
This is a new tag that may not be supported in older browsers or devices. 


<section> Section. Designates a section within the content of a document. 
<source> Source. Designates media resources for video or audio elements. Multiple 
sources can be defined for browsers that do not support the default 
file type. 


<video> Video. Designates video content, such as a movie clip or other video streams. 


Semantic web design 


Many of the changes to HTML were made to support the concept of semantic web 
design. This movement has important ramifications for the future of HTML, its 
usability, and the interoperability of websites on the Internet. At the moment, each 
webpage stands alone on the web. The content may link to other pages and sites, 


but there’s really no way to combine or collect the information available on mul- 
tiple pages or multiple sites in a coherent manner. Search engines do their best to 
index the content that appears on every site, but much of it is lost due to the nature 
and structure of old HTML code. 


HTML was initially designed as a presentation language. In other words, it was 
intended to display technical documents in a browser in a readable and predictable 
manner. If you look carefully at the original specifications of HTML, it looks like a 
list of items you would put in a college term paper: headings, paragraphs, quota- 
tions, tables, numbered and bulleted lists, and so on. 


The element list in the first version of HTML basically identified how the content 
would be displayed. These tags did not convey any intrinsic meaning or signifi- 
cance. For example, using a heading tag displayed a particular line of text in bold, 
but it didn’t tell you what relationship or importance the heading had to the follow- 
ing text or to the story as a whole. Is it a title or merely a subheading? 


HTMLS has added a significant number of new tags to help us add semantic mean- 
ing to our markup. Tags such as <header>, <footer>, <article>, and <section> 
allow you for the first time to identify specific content without having to resort to 
additional attributes. The result is simpler code and less of it. But most of all, the 
addition of semantic meaning to your code allows yow and other developers to 
connect the content from one page to another in new and exciting ways—many of 
which haven't even been invented yet. It’s truly a work in progress. 


New techniques and technology 


HTMLS5 has also revisited the basic nature of the language to take back some of the 
functions that over the years have been increasingly handled by third-party plug-in 
applications and programming. 

If you are new to web design, this transition will be painless because you have 
nothing to relearn, no bad habits to break. If you already have experience building 
webpages and applications, this book will guide you safely through some of these 
waters and introduce the new technologies and techniques in a logical and straight- 
forward method. But either way, you don’t have to trash all your old sites and 
rebuild everything from scratch. 


Valid HTML 4 code will remain valid for the foreseeable future. HTML5 was 
intended to make web design easier by allowing you to do more with less work. 
So let’s get started! 


See www.w3.org/TR/2017/REC-htm152-20171214 to learn more about HTML 5.2. 


See www.w3.org to learn more about W3C. 
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Review questions 


1 What programs can open HTML files? 
What does a markup language do? 
HTML is composed of how many code elements? 


What is the difference between block and inline elements? 


wu S&S WwW N 


What is the current version of HTML? 
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Review answers 


1 


HTML is a plain-text language that can be opened and edited in any text editor and 
viewed in any web browser. 


A markup language places tags contained within brackets < > around plain-text 
content to pass information concerning meaning, structure, and formatting from one 
application to another. 


HTMLS5 contains over 100 tags. 


A block element creates a standalone element. An inline element can exist within 
another element. 


HTML 5.2 was formally adopted at the end of 2017. Full support of any new recom- 
mendations may take several years. And as with HTML 4, some browsers and devices 
may support the specification in differing ways. 
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WORKING WITH CODE 


Lesson overview 


In this lesson, you'll learn how to work with code and do the 


following: 


Write code using code hinting and Emmet shorthand. 


Set up a cascading style sheets (CSS) preprocessor and create 
Sassy CSS styling. 


Use multiple cursors to select and edit code. 
Collapse and expand code entries. 


Access and edit attached files using the Related Files interface. 


This lesson will take about 2 hours to complete. To get the lesson files 
used in this chapter, download them from the web page for this book at 


www.adobepress.com/DreamweaverC1B2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 


Split 


Mes CE Lkeanies invert Ck Designee 


YB © Bricssonas 


favarite-ttyies.<ss, 


<idoctype html> 


<html> 


Fes 


- eae ; + EB Ste - essend$ Neatoad MaxProjects Peachpit OMECANZE 
stink href="ess/favorite-styles.cas” rel="stylesheet rot 


<meta charset="UTF-8°> 
Untitled Document</titke> 
a> < soyhirntoage stent 
Sowice Cove “fReoribe sree? 


<head> 


ose Code Sptk Live Standard + OS 


Filer CC uibaaries inset CYS Davigner 


© Biess0003 
="wrapper> eee f 


Local hie s 
~ Gz Site ~ tesson23 Menkord Mactroveets Perenon ONECIOIO: 
= sass 
{}  tavorite-smner ess 
wheadert {} _base.sess 
text-align: com PROX ship <P seyhenpage sont 
padding: 30px TOP mrt. seemeenernencnmnee Al agen 
background: url” Amages/favgity ogo jpg"); } 2 tescity-0g9 jpg 
background-repeat: no-rep f +B ax 
background:size: auto 1008 &£ Sie Sela tarts eS , 
j background-color: #ED6; i @ “ % as res oe i 
=sidebart"><!04 i EDS: 7a sne : 
< = border-bottony solid pet sewers 
pe Lote (sen background-position: centé $ 
nemo in maxime dignt stil gaaaialibais SAR NOE 2 
¥ header h2{ General Oto tie same folder as source i 
repudiandae quam tei fopctarnite In “Heer Goren br ? 
: s-family: Impact, Haet * a D Favor 
tenetur incidunt?</p> ¥: { ce O Detine ourpur tosses poisson 
; font-size: 30 { Compass 2 H 
és IMaePeo}eets/Pesehpst/OWCCRODD FwedE/OWEC2G2Zsarchive/ Messe 
color, HEF3; : Bourbon 
lenter-spacing: lem; Dousbon Neat 
text-transform: uppercase, Bosebon Brters 
textshadow: Opx Spx Spx, * Advanced Serings SUuNSisce Nmenu ta _Sustaniize Tooter 
line-height: 1.1; i pees, ® Desetnce ontions to hiBe them in the contour, Click Restore Cafes 
margin: 1px 0 10px 0; Cloaking thaw all options Ia the coaitar, 
¥ header pt Ses 
ile View Columns 
color: IFFF; 
” f Open Secures 
text-transform: uppercase Mulch macrieesirexcroryomccan FO 


ren 
letter-spacing: Sem; beacuwe 1% th file Macagernent 
line-height: 1.1; 


” ans Lae 
sabeccielatet S248: Retry ER live Code 
We Fonts 
Animation Assets 1, uve View Options 
Bum 


body ( 
background: #FECT 
<Aig 


ie 
< ¢><h2>Favorite City Toure 
<p>Travel with a purpose</p></f 

* ="content™ H 


CSS Qurpct 


Rolling 2173 bytes. 
: 


‘ O Replace segment of input gath 
<h1>Insert headline here</t 


Source Folder 


Se. Show/Hide Viawal Media Queries bar 
OD tospece 
<3 Cotapse Fut Tay 

| 2S Collapse Selection 


% Expond AB 
a 


R Select Parent tag 


af? Format Source Cone 


Dreamweaver's claim to fame is as a visual HTML 
editor, but its code-editing features don’t take a back 
seat to its graphical interface, and they offer few com- 
promises to professional coders and developers. 
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® Note: If you have 
not already down- 
loaded the project files 
for this lesson to your 
computer from your 
Account page, make 
sure to do so now. See 
“Getting Started” at the 
beginning of the book. 


© Note: Some tools 
and options are avail- 
able only when Code 
view is active. 


® Note: In all screen 
shots, we use the Clas- 
sic code color theme, 
which can be selected 
in Preferences. See the 
“Getting Started” sec- 
tion at the beginning 
of the book for more 
details. 


Creating HTML code 


As one of the leading WYSIWYG HTML editors, Dreamweaver allows users to cre- 
ate elaborate webpages and applications without touching or even seeing the code 
that does all the work behind the scenes. But for many designers, working with the 


code is not only a desire but also a necessity. 


Although Dreamweaver has always made it as easy to work with a page in Code 
view as it is in Design view or Live view, some developers believe that the code- 
editing tools took a back seat to the visual design interface. Although in the past 
this was partially true, Dreamweaver (2020 release) is fully invested in the vastly 
improved tools and workflows for coders and developers that were brought to the 
program in the previous version. In fact, Dreamweaver can now unify your entire 
web development team as never before by providing a single platform that can 
handle almost any task. 


You'll often find that a specific task is actually easier to accomplish in Code view 
than in Live view or Design view alone. In the following exercises, you'll learn more 
about how Dreamweaver makes working with the code an effortless and surpris- 
ingly enjoyable task. 


Writing code manually 


This exercise will provide a quick overview of the topic of editing code by hand. 
The first step to experiencing Dreamweaver’s code-writing and editing tools is to 
create a new file. 


1 Define a site based on the lesson03 folder downloaded from your Account page, 
as described in the “Getting Started” section at the beginning of the book. 


2 Select Developer from the Workspace menu. 


Help 33 FF G@ Bl & b $C * Ll &) 38%? 
v Developer : 


Standard 


Reset 'Developer' 
New Workspace... 
Manage Workspaces... | 


Save Current | 


All the code-editing tools work identically in either workspace, but the Devel- 
oper workspace focuses on the Code view window and provides a better experi- 
ence for the following exercises. 
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3 Choose File > New. 


The New Document dialog appears. 


_New Document 
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Help Preferences... C ance Sreafe 


4 Choose New Document > HTML > None. 


Click Create. 
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Dreamweaver creates the basic structure of a webpage automatically. The cursor 


will probably appear at the beginning of the code. 
As you can see, Dreamweaver provides color-coded tags and markup to make it 
easier to read, but that’s not all. It also offers code hinting for ten different web 
development languages, including but not limited to HTML, CSS, JavaScript, 
and PHP. 

5 Choose File > Save. 

6 Name the file myfirstpage.html and save it in the lesson03 folder. 


7 Insert the cursor after the <body> tag. 
Press Enter/Return to create a new line. Type < 


<meta charset="UTF-8"> 
<title>Untitled Document</title> 
</head> 


* <body> 
< = ” 
<4 abbr 
acronym 
address 
HTMLAnchorElement 


Defines a hyperiunk, a. 


A code-hinting window appears, showing you a list of HTML-compatible codes 
you can select from. 


8 Typed 


The code-hinting window filters to code elements that start with the letter d. 
You can continue to type the tag name directly or use this list to select the 
desired element. By using the list, you can eliminate simple typing errors. 


9 Press the Down Arrow key. 
The dd tag in the code-hinting window is highlighted. 


10 Continue pressing the Down Arrow key until the tag div is highlighted. 
Press Enter/Return. 


<body> 
<div| 

</body> 

</html> 


The tag name div is inserted in the code. The cursor remains at the end of the 
tag name, waiting for your next input. For example, you could complete the tag 
name or enter various HTML attributes. Let’s add an id attribute to the div 
element. 
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11 Press the spacebar to insert a space. 


The hinting menu opens again, displaying a different list; this time the list con- 
tains various appropriate HTML attributes. 


12 Type id and press Enter/Return. 


Dreamweaver creates the id attribute complete with equal sign and quota- 
tion marks. Note that the cursor appears within the quotation marks, ready for 


your entry. 
13 Type wrapper and press the Right Arrow key once. ® Note: Depending 
on the settings in your 
8 ¥ <body> 8 ¥ <body> program, tags may 
é <div id 9 <div id="wrapperf close automatically. This 
10 </body> hidden 10 </body> behavior can be turned 
</htm|> ss ecu Sua 11 </html> off or adjusted in the 
12 a ieneaneeeieneeaiaal 12 Code Hints section of 
Preferences. 


The cursor moves outside the closing quotation mark. 


14 Type ></ if necessary to close the tag. 


8 ¥ <body> 

g <div id="wrapper"></div> 
</body> 
</html> 


Whether the tag is closed when you type the closing bracket (>) or when you 
begin the closing tag (</), Dreamweaver closes the div element automatically. 
As you see, the program can provide a lot of help as you write code manually. 
But it can help you write code automatically too. 


15 Choose File > Save. 


Writing code automatically 


Emmet is a web-developer toolkit that was added to a previous version of Dream- 
weaver and enables you to supercharge your code-writing tasks. When you enter 
shorthand characters and operators, Emmet enables you to create whole blocks 
of code with just a few keystrokes. To experience the power of Emmet, try this 


exercise. 
1 Ifnecessary, open myfirstpage.html. 


2 In Code view, insert the cursor within the div element and press Enter/Return 


to create a new line. 


Emmet is enabled by default and works whenever you are typing in Code view. 
Next you will add a <nav> element as the foundation of the site navigation. 
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3 Type nav and press Tab. 


8 ¥ <body> 8 ¥ <body> 

9 <div id="wrapper'>| g <div id="wrapper"> 
10 Re flomm<nav></nav>safeiles 
11 </body> li </body> 
12 </html> 12. </html> 


Dreamweaver creates the opening and closing tags all at once. The cursor 
appears inside the nav element, ready for you to add another element, some 
content, or both. 


HTML navigation menus are usually based on an unordered list, which consists 
of a <ul> element with one or more child <1i> elements. Emmet allows you 

to create more than one element at the same time, and by using one or more 
operators, you can specify whether the subsequent elements follow the first (+) 
or are nested one within the other (>). 


4 Type ul>1li and press Tab. 


8¥ <body> 


8 ¥ <body> 


9 <div id="wrapper"> <div id="Wrapper"> 
10.v EREWeSul>liiENes</div> <nav><ul> 


11 </body> 
12. </html> 


413 </ul></nav></div> 


rt 


A <ul> element containing one list item appears. The greater-than symbol (>) 
is used to create the parent-child structure you see here. By adding another 
operator, you can create several list items. 


5 Choose Edit > Undo. 


The code reverts to the ul>1i shorthand. It’s easy to adapt this shorthand 
markup to create a menu with five items. 


6 Edit the existing shorthand phrase as highlighted—u1>17 *5—and press Tab. 


8 ¥ <body> 8 ¥ <body> 
9¥ <div id="Wrapper"> 9 <div id="wrapper"> 
10» EAEWEul>li*SBaRtes</div> y <nav><ul> 
11 </body> 
12 </html> o <li></li> 
13 <li></li> 
14 <li></li> 
15 <li></li> 
1 </ul></nav></div> 
</body> 
18 </html> 


A new unordered list appears, this time with five <1i> elements. The asterisk 


(x) is the mathematical symbol for multiplication, so this latest change says 
scllapi times 5; 


To create a proper menu, you also need to add a hyperlink to each menu item. 
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7 Press Ctrl+Z/Cmd+Z or choose Edit > Undo. 
The code reverts to the ul>11*5 shorthand. 


8 Edit the existing shorthand phrase as highlighted: 
ul>lix5>a 


If you guessed that adding the markup >a would create a hyperlink child ele- 
ment for each link item, you are correct. Emmet can also create placeholder 
content. Let’s use it to insert some text in each link item. 


9 Edit the shorthand phrase as highlighted: 
ul>lix5>a{Link} 


Adding text within braces passes it to the final structure of the hyperlink, but 
we're not done yet. You can also increment the items, such as Link 1, Link 2, 
Link 3, and so on, by adding a variable character ($). 


10 Edit the shorthand phrase as highlighted—ul>1lix5>a{Link $}—and 
press Tab. 


® Note: The cursor must be outside the brace before you press Tab. 


8 ¥ <body> 
9% <div id="Wwrapper"> 


PaEvesul>li*5>alil ink Sieves</div> 


8 ¥ <body> 
9% <div id="wWrapper"> 
10 ¥ <nav><ul> 


11 </body> 11 <li> Alea Link 1</a></li> 

12 </html> 12 <li><a href="">Link 2</a></li> 
i3 <li><a href="">Link 3</a></li> 
14 <li><a href="">Link 4</a></li> 
15 <li><a href="">Link 5</a></li> 
16 </ul></nav></div> 


</body> 


The new menu appears fully structured, with five link items and hyperlink 
placeholders incremented 1 through 5. The menu is nearly complete. The only 
things missing are targets for the href attributes. You could add them now 
using another Emmet phrase, but let’s save this change for the next exercise. 


11 Insert the cursor after the closing </nav> tag. @ Note: Adding the 
new line makes the 
code easier to read and 
edit, but it has no effect 
on how it operates. 


Press Enter/Return to create a new line. 
Let’s see how easy it is to use Emmet to add a header element to your 
new page. 
12 Type header and press Tab. 
As with the <nav> element you created earlier, the opening and closing header 
tags appear, with the cursor positioned to insert the content. Now you will 
add two text components: an <h2> for the company name and a <p> element 
for the motto. Emmet provides a method for adding not only the tags but also 


the content. 
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13 Type h2{Favorite City Tour}+p{Travel with a purpose} and 
press Tab. 


16 </ul></nav></div> 

17 <header><h2>Favorite City Tour</h2> 
18 <p>Travel with a purpose</p></header> 
19 </body> 

20% </html> 


an 


</ul></nav></div> : 
1? EXRERPE3h2iFavorite City Tour}+p{Travel with a purpose} Berries | 

</body> : 
</html> 


oo 


ey 


The two elements appear complete and contain the company name and motto. 
Note how you added the text to each item using braces. Thé plus (+) sign desig- 
nates that the <p> element should be added as a sibling to the heading. 


14 Insert the cursor after the closing </header> tag. 
15 Press Enter/Return to insert a new line. 


Emmet enables you to quickly build complex multifaceted parent-child struc- 
tures like the navigation menu and the header, but it doesn’t stop there. As you 
string together several elements with placeholder text, you can even add id 
and class attributes. To insert an id, start the name with the hash symbol (#); 
to add a class, start the name with a dot (.). It’s time to push your skills to the 
next level. 


@ Note: The entire 16 Type main#content>aside.sidebar1>p(lorem) *article> 


phrase may wrap to p(lorem100) “aside.sidebar2>p(lorem) and press Tab. 
more than one line in 
Code view, but make 15 </ul></nav></div> 
sure there are no spaces 6 Sin oft bathed tarene ss Stier ; 
J Ori ie 7 a r 2 
or line breaks within the 18 eee Siren) aveicleciotewerntGarssecieeaer rear a 
markup. 19 </body> 
20 </html> 


<main id="content"> 
<aside class="sidebar1"> 

20 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse nemo in maxime 

dignissimos omnis voluptas molestias veritatis cupiditate repudiandae quam 

temporibus, itaque dicta eveniet at harum reprehenderit tenetur incidunt?</p> 


21 </aside> 
22 ¥ <article> 
23 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit fugiat magnam 


commodi minima quaerat recusandae nobis explicabo debitis magni. Asperiores 
illum, nobis, fugiat aliquam magni suscipit fugit optio provident alias iste ipsa 
quisquam? Provident adipisci quam architecto, repellat molestiae. Placeat officia 
illo, beatae nam eum aut reiciendis dolorum assumenda deserunt est incidunt 
tempora recusandae quis accusantium unde numquam, quaerat consequatur 
ducimus et in iusto reprehenderit. Laudantium illum voluptates totam modi 
possimus veritatis eligendi harum rerum, velit saepe facilis, distinctio cum, quasi 
placeat voluptatibus. Dolorem consequatur, quae ipsum magni iure sapiente esse 
debitis, beatae inventore hic nemo alias omnis quibusdam placeat!</p> - ” 

</article> 

<aside class="sidebar2"> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur natus blanditiis, 

laboriosam provident placeat eum, tempora, laborum dolorem temporibus, enim 
totam rerum. Sequi, eius laudantium nemo nisi voluptates possimus quam!</p> 

</aside> 

</main> 
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A <main> element is created with three child elements (aside, article, 
aside), along with id and class attributes. The caret () symbol in the short- 
hand is used to ensure that the article and aside.sidebar2 elements are 
created as siblings of aside. sidebar1. Within each child element, you should 
see a paragraph of placeholder text. 


Emmet includes a Lorem generator to create blocks of placeholder text auto- 
matically. When you add lorem in parentheses after an element name, such as 
p(lorem), Emmet will generate 30 words of placeholder content. To specify 

a larger or smaller amount of text, just add a number at the end, such as 
p(lorem100) for 100 words. 


Let’s finish up the page with a footer element containing a copyright 
statement. 


17 Insert the cursor after the closing </main> tag. 
Create a new line. 
Type footer{Copyright 2021 Favorite City Tour. All rights 
reserved.} and press Tab. 


21 </aside> 
22 footeriCopyright 2021 Favorite City Tour. All rights reserved.|} 
23 </body> / 


24 </html> 


21 </aside> 


22. <footer>(Copyright 2021 Favorite City Tour. All rights reserved.</footer> 
23 </body> 


24 = </htmi> 


18 Save the file. 


Using a few shorthand phrases, you have built a complete webpage structure and 
some placeholder content. You can see how Emmet can supercharge your code- 
writing tasks. Feel free to use this amazing toolkit at any time to add a single ele- 
ment or complex, multifaceted components. It’s there anytime you need it. 


This exercise has barely scratched the surface of what Emmet can do. It is sim- 
ply too powerful to fully describe in just a few pages. But you got a good peek at 
its capabilities. 


Check out https://emmet.io to learn more about Emmet. Check out https:// 
docs.emmet.io/cheat-sheet for a handy Emmet shorthand cheat sheet. 
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Working with multicursor support 


Have you ever wanted to edit more than one line of code at a time? Dreamweaver 
(2020 release) has multicursor support that allows you to select and edit multiple 
lines of code at once to speed up a variety of mundane tasks. Let’s take a look at 


how it works. 


1 Ifnecessary, open myfirstpage.html as it appears at the end of the previous 


exercise. 


The file contains a complete webpage, with nav, header, main, and footer 
elements. The content features classes and several paragraphs of placeholder 
text. The <nav> element includes five placeholders for a navigation menu, but 
the href attributes are empty. For the menu and links to appear and behave 
properly, you need to add a filename, URL, or placeholder element to each link. 
Many web designers use the hash mark (#) as placeholder content until the final 
link destinations is added. 


2 Insert the cursor between the quotation marks in the href=""" attribute in 


Link 1. 


Normally, you would have to add a hash mark (#) to each attribute individually. 
Multicursor support makes this task much easier, but don’t be surprised if it 
takes you a little practice. Note that all the link attributes are aligned vertically 
on consecutive lines. 


Hold the Alt key (Windows) or Option key (macOS) and drag the mouse down 
through all five links. 


Using the Alt/Option key enables you to select code or insert cursors in con- 
secutive lines. Be careful to drag down in a straight line. If you slip a little to the 
left or right, you may select some of the surrounding markup. If that happens, 
you can just start over. When you are finished, you should see a cursor flashing 
in the href attribute for each link. 


4 Type # 


The hash mark (#) appears in all five attributes at the same time. 


<div id="wrapper"> 
<nav><ul> 
<li><a href="l'>link 1</a></li> 
<li><a href="'>link 2</a></li> 
<li><a href="'>link 3</a></li> 
<li><a href="">link 4</a></li> 


</ul></nav></div> 
<header><h2>Favorite City Tour</h2> 


v <div id="wrapper"> 
<nav><ul> 
<li><a href="#!'>link 1</a></li> 
<li><a href="#!'>link 2</a></li> 
<li><a href="#! >link 3</a></li> 


<li><a href="#!'>link 4</a></li> 
link SEB </li> 


</ul></nav></div> 
<header><h2>Favorite City Tour</h2> 


The Ctrl/Cmd key enables you to select code or insert cursors in nonconsecu- 
tive lines of code. 


LESSON 3. Working with Code 


5 Click to insert the cursor between the p and the > bracket in the first of the 
opening <p> tags in the <main> element. 


6 Hold the Ctrl/Cmd key and click to insert the cursor between the p and the > 
bracket in the other two opening <p> tags in the <main> element. 


7 Press the spacebar to insert a space, and type class="first" 


10 we 


<aside clacc=a"cidahar1"> 


<p class="first"PLo em ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse nemo 
in maxime |lignissimos omnis voluptas molestias veritatis cupiditate repudiandae 
quam temy|oribus, itaque dicta eveniet at harum reprehenderit tenetur incidunt? 
</p> 
</aside> 
<article> 
<p class="first"> Lo} em ipsum dolor sit amet, consectetur adipisicing elit. Odit fugiat 
magnam cj mmodi minima quaerat recusandae nobis explicabo debitis magni. 
Asperiores |llum, nobis, fugiat aliquam magni suscipit fugit optio provident alias 
iste ipsa qu|squam? Provident adipisci quam architecto, repellat molestiae. Placeat 
officia illo, || eatae nam eum aut reiciendis dolorum assumenda deserunt est 
incidunt te] 1pora recusandae quis accusantium unde numquam, quaerat 
consequati|r ducimus et in iusto reprehenderit. Laudantium illum voluptates totam 
modi possi]nus veritatis eligendi harum rerum, velit saepe facilis, distinctio cum, 
quasi place}it voluptatibus. Dolorem consequatur, quae ipsum magni iure sapiente 
esse debiti:|, beatae inventore hic nemo alias omnis quibusdam placeat!</p> 
</article> 
<aside class="sideba]2"> 
BefeEseskileigeLo| em ipsum dolor sit amet, consectetur adipisicing elit. Pariatur natus 
wranunns, avporiosam provident placeat eum, tempora, laborum dolorem 


The class appears simultaneously in all three <p> tags. 
8 Save the file. 


Multicursor support can save tons of time in repetitive code-editing tasks. 


Customizing the Common toolbar 


Customize Toolbar 


Some of the code-editing exercises in this lesson 


- & . Desel hide them in th Ibar, Click Ri Defaul 
require tools that may not appear in the interface hon al cee PaoMa a tt eae a Done 
H Can 
by default. The Common toolbar was previously | CGancei 


* . | Restore Default ) 
called the Coding toolbar and appeared only in [. &4 Collapse Selection Ceesore Beal 


Code view. The new toolbar appears in all views, 
but some tools may be visible only when the cur- 
sor is inserted directly in the Code view window. (ij ® Select Parent Tag 


@ ‘Y expand All 


If the exercise calls for a tool that is not visible, ee eee eee 
even with the cursor in the proper position, you 
may need to customize the toolbar yourself. This 
can be done by first clicking the Customize Tool- 
bar icon *** and then enabling the tools within C) {i} Balance Braces 
the Customize Toolbar dialog. At the same time, ay cee 
feel free to disable tools you don’t use or want. 


E) Apply Comment 


[3 Remove Comment 
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Commenting your code 


Comments allow you to leave notes within the code—invisible in the browser—to 
describe the purpose of certain markup or provide important information to other 
coders. Although you can add comments manually at any time, Dreamweaver has a 


built-in feature that can speed up the process. 
1 Open myfirstpage.html and switch to Code view, if necessary. 
2 Insert the cursor after the opening tag 

<aside class="sidebar1">. 


3 Click the Apply Comment icon i, 


i i... dea —E—e <p>Travel with a purpose</p></header> 


NP i8 ~  <mainid="content"> 
Local Filest 0 ¥ <aside class="sidebar1"> 
G2 Site - lesson03 (NewRoad:MacProjects:... 20 <p class="first’>Lorem ipsum dolor sit amet, consectetur a 
<> myfirstpage.htm| in maxime dignissimos omnis voluptas molestias vé 
¥ 2 images quam temporibus, itaque dicta eveniet at harum re 
&, </p> 
21 </aside> 


PS 22 ¥ <article> : 

23 <p class="first">Lorem ipsum dolor sit amet, consectetur a 
Apply [* *®Somment magnam commodi minima quaerat recusandae no 
Apply // Comment Asperiores illum, nobis, fugiat aliquam magni susciy 
Apply ‘Comment iste ipsa quisquam? Provident adipisci quam archit¢ 

officia illo, beatae nam eum aut reiciendis dolorum 


A pop-up menu appears with several comment options. Dreamweaver supports 
comment markup for various web-compatible languages, including HTML, 
CSS, JavaScript, and PHP. 


4 Choose Apply HTML Comment. 


An HTML comment block appears, with the text cursor positioned in 
the center. 


5 Type Insert customer testimonials into Sidebar 1 


18 ¥ <mainid="content"> 
<aside class="sidebar1"><!--Insert customer testimonials into Sidebar 1f-> 
<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse nemo 
in maxime dignissimos omnis voluptas molestias veritatis cupiditate repudiandae 


The comment appears in gray between the <!-- and --> markup. The tool can 
also apply comment markup to existing text. 


6 Insert the cursor after the opening tag 


<aside class="sidebar2">, 
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7 Type Sidebar 2 should be used for content related to the tour 
or product 


8 Select the text created in step 7. 
Click the Apply Comment icon #1, 
A pop-up menu opens. 


9 Select Apply HTML Comment. 


incidunt tempora recusandae quis accusantium unde numquam, quaerat 
consequatur ducimus et in iusto reprehenderit. Laudantium illum voluptates totam 
modi possimus veritatis eligendi harum rerum, velit saepe facilis, distinctio cum, 
quasi placeat voluptatibus. Dolorem consequatur, quae ipsum magni iure sapiente 
esse debitis, beatae inventore hic nemo alias omnis quibusdam placeat!</p> 
</article> 
<aside class="sidebar2">Sidebar 2 should be used for content related to the tour or product 
<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur natus 


Appl KHTML Comment 
Apply /* */ Comment 
Apply // Comment 


Apply ' Comment 


i 
H 
| 
i 


<aside class="sidebar2"><i-Sidebar 2 should be used far content related to the tour or 
__ prodict-> 
26 <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur natus 


Dreamweaver applies the <!-- and --> markup to the selection. If you need to 
remove existing comment markup from a selection, click the Remove Comment 
icon $2 in the toolbar. / 


10 Save all files. 


You've created a complete basic webpage. The next step is to style the page. 
Dreamweaver (2020 release) now supports CSS preprocessors for LESS, Sass, and 
SCSS. In the next exercise, you'll learn how to set up and create CSS styling using a 
preprocessor. 


Working with CSS preprocessors 


One of the biggest changes to Dreamweaver in recent years was adding built-in 
support for LESS, Sass, and SCSS. These industry-standard CSS preprocessors are 
scripting languages that enable you to extend the capabilities of cascading style 
sheets with a variety of productivity enhancements and then compile the results in 
a standard CSS file. These languages provide a variety of benefits for designers and 
developers who prefer to write their code by hand, including speed, ease of use, 
reusable snippets, variables, logic, calculations, and much more. No other software 
is needed to work in these preprocessors, but Dreamweaver also supports other 
frameworks, such as Compass and Bourbon. 


In this exercise, you'll get a taste of how easy it is to use a preprocessor with 
Dreamweaver as well as what advantages a preprocessor offers compared to a 
regular CSS workflow. 
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Enabling a preprocessor 


Support for CSS preprocessors is site-specific and must be enabled for each 
site defined in Dreamweaver, as desired. To enable LESS, Sass, or SCSS, you 
first define a site and then enable the CSS Preprocessors option within the Site 
Definition dialog. 


1 Select Site > Manage Sites. 
The Manage Sites dialog appears. 


2 Select lesson03 in the Your Sites window. 
Click the Edit icon @ at the bottom of the Your Sites window. 


; Manage Sites 


Your Sites 


| Name Type 
[esson01 oe Oa Pn ee Dreamweaver 
lesson02 Dreamweaver | 
lesson03 Ses Dreamweaver | 
, 


etc 


import Site) { New Site) 


( Help _) Done 


The Site Definition for lesson03 appears. 
3 Select the CSS Preprocessors option in the Site Definition dialog. 


The CSS Preprocessors option contains six subcategories, including General, 
Source & Output, and options for various Compass and Bourbon frameworks. 
You can check out the Dreamweaver Help topics for more information on these 
frameworks. For this exercise, you need only the features that are built into the 
program itself. 


4 Select the General category. 


When selected, this category features the on/off switch for the LESS, Sass, or 
SCSS compiler, as well as various options for how the languages operate. For 
our purposes, the default settings will work fine. 
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5 Select the Enable Auto Compilation On File Save checkbox to enable the pre- 
processor compiler, if necessary. 


Site Setup for lesson03 


Este 
| Servers Enable Auto Compilation On File Save 
iy CSS Preprocessors h 

_ General — s LESS: (_) Enable strict math 
\ Source & Output 

{_] Enable strict units 
Compass 

Sourbon {_] Rewrite URLs as relative URLs 


i Bourbon Neat (_] Generate Source map 


Bourbon Bitters 
> Advanced Settings SASS/SCSS: Output file style nested i 


| 
| {_] Create Source Comments 
i 


{_} Generate Source map 


When this is enabled, Dreamweaver will automatically compile your CSS from 
your LESS, Sass, or SCSS source files whenever they are saved. Some designers 
and developers use the root folder of the site for compilation. In this case, we'll 
separate the source and output files in distinct folders. 


- - f% - 


That's hard to say. Some think that LESS is easier to learn but that Sass offers more 
powerful functionality. Both make the chore of writing CSS by hand faster and easier 
and, more importantly, provide significant advantages for maintaining and extend- 
ing your CSS over time. There are lots of opinions on which preprocessor is better, 
but you'll find that it comes down to personal preference. 


Before you decide, check out the following links to get some informed perspectives: 
e blog.udemy.com/less-vs-sass/ 

° css-tricks.com/sass-vs-less/ 

e zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/ 

e keycdn.com/blog/sass-vs-less 


Dreamweaver provides two syntaxes for Sass. In this lesson, we use SCSS (Sassy CSS), 
which is a form of Sass that is written and looks more like regular CSS. 


6 Select the Source & Output category. 


This category enables you to designate the source and output folders for your 
CSS preprocessor. The default option targets the folder where the source file 


is saved. 
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7 Select the Define Output Folder option. 


‘Site Setup for lesson03 


Site 
| ee CSS Output 
|v CSS Preprocessors 
| General © In the same folder as source 
| Source Output © Define output folder 
Compass see i 
me /webs/DWCC2020/Lessons/lesson03/css 
Bourbon = ce ss 


Bourbon Neat ©) Replace segment of input path 


Bourbon Bitters 
> Advanced Settings 


Source Folder 


| /webs/DWCC2020/Lessons/lesson03 


@ Note: The css folder When the option is selected, the current folder path should become editable. 


does not exist yet, and Note the path displayed. If you see that /css has been appended to the lesson 
you will not see it in the . : 


Files panel. It should be 
created automatically as = § Click the Browse For Folder icon 
soon as yOu save your 

SCSS source file the A file browser dialog appears. 
first time. 


folder, you can skip to step 12. 


9 Navigate to the Site Root folder, if necessary. 
Create a new folder. 


10 Name the new folder css. 
Click Create. 


Oo 8 = {@ lesson03 3 < 88 e3 & fesson03 


Namo Date Modified Ye Size Kind 


<> 
£ 


y ties: New Folder bac 
> [i images un 
> 

(2) Sass Name of new folder: 


Cancel 


New Folder 


New Folder 


11 Select the css folder and click Select Folder/Choose. 


Next you have to select the Source folder. 


12 Click the Browse For Folder icon gaa beside the Source Folder field. 
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13 Navigate to the Site Root folder. 


ze Site Setup for lesson03 
Site 


spate CSS Output 

f ~ CSS Preprocessors. 
; © 8 =] £9 lesson03 S Q Sear General On the same foider as source 

Source & Outpr 
| Name Date Modified =v Size Kind 13 — ae Batic cick foiee 
| o mytieepage.nt B23/10 2KE araccin ee JMacProjects/Peachpit/OWCC2020/weds/OWCC2020/Lessons/iesso £3 
| > Bess 8/23N8 3 Folder ourbon Neat O Replace segment of input path 
|» <3 Images B2219 “ Folder Bourbon Bitters 
j > I Sass TYSN8 = Folder > Advanced Settings 
i 

Source Folder 

j {webs /DWCC2 2020/Lessons/iesson03/Sass saeett aa aaa & 
H 
i 
j New Folder Caneel Chogse 


Select the existing Sass folder, and click Select Folder/Choose. 
14 Save the changes and click Done to return to your site. 


The CSS preprocessor is enabled, and the source and output folders are now 
designated. Next, you'll create the CSS source file. 


Creating the CSS source file 


When using a preprocessor workflow, you do not write the CSS code directly. 
Instead, you write rules and other code in a source file that is then compiled to the 
output file. For the following exercise, you'll create a Sass source file and learn some 
of the functions of that language. 


1 Select Standard from the Workspace menu. 

2 Choose Window > Files to display the Files panel, if necessary. 
Select lesson03 from the Site List dropdown, if necessary. 

3 If necessary, open myfirstpage.html and switch to Split view. 
The webpage is unstyled at the moment. 

4 Choose File > New. 


The New Document dialog appears. This dialog allows you to create all types of 
web-compatible documents. In the Document Type section of the dialog, you 
will see the LESS, Sass, and SCSS file types. 
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5 Choose New Document > SCSS. 
Click the Create button. 


New Document 


Document Type: Layout: 
pe Ae 
|<) HTML 
& New Document Weve 
ss {3 Less | 
[SSP Starter Templates |{} sess 
i} Sass | 
O00} Site Templates \2 JavaScript 


= 


A new blank SCSS document appears in the document window. SCSS is a flavor 


of Sass that uses a syntax that is similar to regular CSS and that many users find 
easier to learn and work with. 


6 Save the file as favorite-styles.scss in the Sass folder you targeted as the Source 
folder in the previous exercise. 


@ Save As 
bi Save As: favorite-stylesbcss eal a 
Tags: 
spain & Sass S Q 
Name Date Modified v Size Kind 
Unicode Normalization Form: C (Canonical Decomposition, followed by Canonical Composi... s 

include Unicode Signature (BOM) 

Site Root 

New Folder Cancel 


There's no need to create the CSS file; the compiler in Dreamweaver will do 
that for you. You're all set to start working with Sass. The first step is to define 
variables. Variables are programmatic constructs that enable you to store CSS 
specifications you want to use multiple times, such as colors in your site theme. 
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By using a variable, you have to define it only once. If you need to change it in 
the future, you can edit one entry in the style sheet and all the instances of the 
variable are updated automatically. 


Insert the cursor into line 2 of favorite-styles.scss. 
Type $logoyellow: #ED6; and press Enter/Return. 


You've created your first variable. This is the main green color of the site theme. 
Let’s create the rest of the variables. 


Type $darkyellow: #EDO0; 

$Slightyellow: #FF33 

$logoblue: #069; 

S$darkblue: #089; 

$lightblue: #08A; 

$font-stack: "Trebuchet MS", Verdana, Arial, Helvetica, 
sans-serif; and press Enter/Return to create a new line. 


Xx myfirstpage.html xX favorite-styles.scss* 
/* Scss Document */ 
2 Slogoyellow: #ED6; 
3 $darkyellow: #EDO; 
4 = Slightyellow: #FF3; 
5  Slogoblue: #069; 
6  Sdarkblue: #089; 
7 ~— Slightblue: #08A; 
Sfont-stack: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 


Entering the variables on separate lines makes them easier to read and edit but 
does not affect how they perform. Just make sure you add a semicolon (;) at the 
end of each variable. 


Let’s start the style sheet with the base or default styling of the body element. 
SCSS markup in most cases looks just like regular CSS, except in this case you'll 
use one of your variables to set the font family. 


Type body and press the spacebar. 
Type { and press Enter/Return. 


When you typed the opening brace ({), Dreamweaver created the closing brace 
automatically. When you created the new line, the cursor was indented by 
default, and pressing Enter/Return moved the closing brace to the following 
line. You can also use Emmet to enter the settings more quickly. 
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10 Type ff$font-stack and press Tab. 


8 $font-stack: "Trebuchet MS", Verdana, Arii 
9% body{ 
10 font-family: $font-stack; 
11} 


8 $font-stack: "Trebuchet MS", Verdana, A 
9 © body { 

10 ff$font-stack| 

a, 


The shorthand expands to font-family: $font-stack;. 


11 Press Enter/Return to create a new line. 
Type c and press Tab. 


&  $font-stack: "Trebuchet MS", Verdana, Ar 8  $font-stack: "Trebuchet MS", Verdana, Ari 


9 © body { 9 y body { 
10 font-family: Sfont-stack; 10 font-family: $font-stack; 
ae - 


141% color: #000; 


The shorthand expands to color: #000;. The default color is acceptable. 


12 Hold the Alt/Cmd key and press the Right Arrow key as necessary to move the 
cursor to the end of the current line of code. 


13 Press Enter/Return to create a new line. 
Type m and press Tab. 


8  $font-stack: "Trebuchet MS", Verdana, Ari 
9 ¥ body { 

) font-family: Sfont-stack; 

1 color: #000; 

2 margin: 0; 


} 


8  $font-stack: “Trebuchet MS", Verdana, A 
9 ¥ body{ 

10 font-family: Sfont-stack; 

color: #000; 

moO 


} 


4¢ 
cae 
i 

1: 


; 
& 


The shorthand expands to margin: 0;, completing the basic styling for the body 
element. Before you save the file, this is a good time to see how preprocessors do 
their work. 


Compiling CSS code 


You have completed the specifications for the body element. But you have not 
created the styling directly in a CSS file. Your entries were made entirely in the 
SCSS source file. In this exercise, you will see how the compiler that is built into 
Dreamweaver generates the CSS output. 
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1 Display the Files panel, if necessary, and expand the list of site files. ® Note: File may be 


displayed differently 
Files CC Libraries insert CSS Designer = than as depicted. 


= > Blesson03 - (Define Servers ) 


Local Files T : 
~ Site - lesson03 (NewRoad:MacProjects:Peachpit:DWCC2020:webs:DWCC... 
> Sass 
</> myfirstpage.html 
images 
> css 


The site consists of one HTML file and three folders: css, images, and Sass. 


2 Expand the view of the css and Sass folders. 


Files CC Libraries insert 55 Designer = 


Se @® Bilessono3 \ ( Define Servers ) 
fo 


Local Files T 
NZ Site - lesson03 (NewRoad:MacProjects:Peachpit:DWCC2020:webs:DWCC... 
~ B® Sass 
{} favorite-styles.scss f : 
{} _base.scss 
</> myfirstpage.htm! 
a) images 


“ css 
Ey 


favorite-styles.css 


The Sass folder contains favorite-styles.scss and _base.scss. The css folder con- 
tains favorite-styles.css. This file did not exist when you started the lesson. It was 
generated automatically when you created the SCSS file and saved it into the site 
folder defined as the Source folder. At the moment, the CSS file should contain no 
CSS rules or markup. It’s also not referenced in the sample webpage. 


® Note: The favorite-styles.css file should have been created automatically in the previous exer- 
cise when the SCSS file was saved. If you do not see the .css file, you may need to shut down and 
relaunch Drearnweaver. 
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3 Select the document tab for myfirstpage.html. 
Switch to Split view, if necessary. 


eee Code Split Design + Standard » BS 
x myfirstpage.html x favorite-styles.sess® < = 
a) [oe link 1 oe S } B tesson03 ‘ (Define Servers) Servers 
“Fi © link 2 i = 
th | + link3 | e2 
} « link 4 Local Files t 
i] | ¢ link 5 |v GB Site - lesson03 (NewRoad:MacProjects:Peachpit:OWCC202. 
i -~ © Sass a 
eet aeereaed I So oe Zek {}  favorite-styles.sess 
Favorite City Tour | {} _basesess 
i j </> myfirstpage.hum! 
; images 
40% <div id="wrapper"> ~& cs 
11% <nav><ul> {}  fayorite-styles.css 
12 <li><a href="#">link 1</a></li> 
13 #">link 2</a></li> 
14 "#"> link 3</a></li> 
15 <li><a href="#">link 4</a></li> 
16 <li><a href="#">link 5</a></li> 
+7 clulnzinawn+ fais 
body sheader =~ h2 @ HTL vy 662x180 v INS 16:21 ire) 
Sees AOU Nokia Sintra = 
Format Heading 2 whe Chase (Nore) Boeck se ss Title 
10 None v Unk ¥ O&  Tarset 
Document Title Untitled Document C Page Properties...) * CG BH  Liocal items selected totalling 20 bytes. 
DOM Assets Snippets SS 


The page shows only default HTML styling. 


4 Inthe Code view window, insert the cursor after the opening <head> tag and 
press Enter/Return to insert a new line. 


5 Type <link’and press the spacebar. 
The hinting menu appears. You'll link the webpage to the generated CSS file. 


6 Type href and press Enter/Return. 


y <head> 

<link hreff 
5 <metacha href 
6  <title>Unti 
7 </head> 


3 ¥ <head> 

4 <link href="[ 
5 <meta chars Brows 
6  <title>Untitle 

7 </head> = 


a ta 


hreflang 


The complete href="" attribute appears, and the hinting menu changes to 


display the Browse command and a list of pathnames to folders available in 
the site. 


7 Press the Down Arrow key to select the path css/ and press Enter/Return. 


The hinting menu now displays the path and filename to favorite-styles.css. 
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8 Press the Down Arrow key to select 
css/favorite-styles.css and press Enter/Return. 


3~ <head> 
4 <link href="css/" 
5 <meta charset="|_ Browse... 


6 <title>Untitled D~ if ee ee 
</head> __ €ss/Tavorite-s ESS 


3 ¥ <head> 

4 <link href="css/favorite-styles.css” 
5 <meta charset="UTF-8"> 

6  <title>Untitled Document</title> 

7 </head> 


fo oi 


The URL to the CSS output file appears in the attribute. The cursor is moved 
outside the closing quotation mark and is ready for the next entry. For the style 
sheet reference to be valid, you need to create one more attribute. 


9 Press the spacebar, and then type rel and press Enter/Return. 


3 ¥ <head> 
4 <link href="css/favorite-styles.css” rel="[ 
5 <meta charset="UTF-8"> start 
6 <title>Untitled Document</title> 
stylesheet 
</head> 
subsection 


Select stylesheet from the hinting menu. 


10 Move the cursor outside the closing quotation mark. Type > to close the link. 


3 w <head> 
<link href="css/favorite-styles.css" re|="stylesheet"> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
</head> 


The CSS output file is now referenced by the webpage. In the Live view 
window, there should be no difference in the styling, but you should now see 
favorite-styles.css displayed in the Related Files interface. 


® Note: If you accidentally saved the SCSS file before this step, you may see styling in the 
HTML file and another filename in the Related Files interface. 


1 


—_ 


Select favorite-styles.css in the Related Files interface. 


Code view displays the contents of favorite-styles.css, showing only the com- 
ment entry /* Scss Document */. An asterisk appears next to the filename 

in the document tab for favorite-styles.scss, indicating that the file has been 
changed but not saved. 
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12 Choose Window > Arrange > Tile. 


Help @ Dreamweaver File Edit View Insert Tools Find Site Window Help 
| Application Ba eee Code Split Design v 
pagan aes x myfirstpage.bim|* x fayorite~styles.sess” 
Toolbars Source Code Y 1 /*Sess Document */ 
Arrange tt 2 Slogoyellow: #ED6; 
Workspace Layout u 3  $darkyellow: #EDO; 
* link 2 4 — $lightyellow: #FF3; 
Saat i : Hisk3 5  Slogoblue: #069; 
i = 6  S$darkblue: #089; 
CC Libraries |< tink’ 7 Slightblue: #084; 
eae — Repeat ig ¥ 8  $font-stack: "Trebuchet MS", Verdana, Arial, 
CSS Transitions y Favorite City Tour | ne Heats sans-serif; 
Bee ‘ Sess Document */ 16 font-family; Sfont-stack; 
¥ Files 2 ; color: #600; 
Insert 12 margin: 0; 
wer I | 13 } 
Git 
v Properties 
Results 
puibbels NS izis [SB Q CS ~ 335x163 @ sss ~ 
The webpage and the source file appear side by side in the program window. 
13 Insert the cursor anywhere in the favorite-styles.scss document window and 
choose File > Save. 
@ Dreamweaver File Edit View Insert Tools Find Site Window Help ZR SS Qb 2 3 e4hu a 
@eo Code Split live ¥ 
x myfirstpagehtml* ® favorite~styles.scss 
Source Code ~ faworite-styles.css_ Y 1 # Sess Document */ 
50 200 250 300 380 400 450 se 2  Slogoyellow: #£D6; 
CC, Ra a aC a 3 $darkyellow: #€D0; 
° 4  Slightyellow: #FF3; 
c 5  $logoblue: #069; 
& : 2 6  $darkblue: #089; 
— 7 $lightblue: #08A; 
_— ° 
= &  $font-stack: "Trebuchet MS", Verdana, Arial, Helvetica, sans- 
© : A serif; 
Favorite City Tour 9 ¥ body{ 
¢ 10 font-family: Sfont-stack; 
é Travel with a purpose 14 color: #000; 
I a Ee a te eee ze ee EI 12 margin: 0; 
g3, i /* Sess Document */ 613 
Q 2 body { i 
x font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans- | 
a serif; 
color: #000; 
margin: 0; } 
@ cS -~ 497x208 ~ INS 1:4 (Sd @ SSS - INS 13:2 (Sb 


After a moment, the display of myfirstpage.html changes, showing the new font 
and margin settings. The Code view window also updates to display the new con- 


tents of favorite-styles.css. Each time you save the SCSS source file, Dreamweaver 
will update the output file. 


® Note: Live view may not update the display instantly. If you don’t see the changes you expect, 


try switching to and from Design view. In extreme situations you may need to close and reopen 
the file. 
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Nesting CSS selectors 


Targeting CSS styling to one element without accidentally affecting another is a 
constant challenge for web designers everywhere. Descendant selectors are one 
method for ensuring that the styling is applied correctly. But creating and main- 
taining the correct descendant structure becomes more difficult as the site and the 
style sheets grow in size. All preprocessor languages offer some form of nesting for 
selector names. 


In this exercise, you will learn how to nest selectors while styling the navigation 
menu. First, you'll set the basic styling for the <nav> element itself. 


1 In the favorite-styles.scss window, insert the cursor after the closing brace (}) @ Note: Make sure 
on line 13 for the body rule. you are working in the 
SCSS file. 


2 Create a new line and type nav { and press Enter/Return. 


The nav selector and the declaration structure are created and ready for your 
entry. Emmet provides shorthand entries for all CSS properties. 


3 Type bg$logoyellow and press Tab. 
Press Enter/Return. 


The shorthand expands to background: $logoyellow, which is the first vari- 
able you created in the SCSS source file. This will apply the color #ED6 to the 
nav element. 


4 Type ta:c and press Tab. Press Enter/Return. 
The shorthand expands to text-align: center. 

5 Type ov:a and press Tab. Press Enter/Return. 
The shorthand expands to overflow: auto. 


6 Save the SCSS source file. 


* myfirstpage.htmi % favorite-styles.sess 
fi /* Secs [ cument */ 
Source Code " favorite=styles.css \ 6 /* Scss Document 
50 100 1%) 200 250 350 4 A | 2 Slogoyellow: #ED6; 


oro = : perme ree a nes 4 3. $darkyellow: #EDO; 
Slightyellow: #FF3; 
Slogoblue: #069; 
Sdarkblue: #089; 
Slightblue: #08A; 
Sfont-stack: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
)¥ body { 
| 0 font-family: Sfont-stack; 
Favorite City Tour color: #000; 
margin: 0; 
} 
vy nav{ 
background: Slogoyellow; 
text-align: center; 
overflow: auto; 


Travel with a purpose 


laAram trem Anlar cit amat rancartotir adinicirina olit Motiue aces 


# nav{ 
background: #ED6; 
text-align: center; 
overflow: auto; } 


CSS + 528x260 v INS Lil [so $CSS OY OINS.. «17220 fey 
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The <nav> element in myfirstpage.html displays the color #ED6. The menu 
doesn’t look like much yet, but you’ve only just begun. Next, you'll format the 
<ul> element. Note that the cursor is still within the declaration structure for 


the nav selector. 
7 Typeul {and press Enter/Return. 
The new selector and declaration are created within the nav rule. 


8 Create the following properties: 
list-style: nones; margin: 5px; 


These properties reset the default styling of the unordered list, removing the 
bullet and indent. Next, you'll override the styling of the list items. 


9 Press Enter/Return and type li { 
Press Enter/Return again. 


As before, the new selector and declaration are fully within the ul rule. 
10 Create the property display: inline-block; and press Enter/Return. 


This property will display all the links in a single row, side by side. The last 
element to style is the <a> for the link itself. 


11 Type a {and press Enter/Return. Create the following properties: 
margin: 03 
padding: 10px 15px; 
color: $logoblue; 
text-decoration: none; 
background: $lightyellow3; 


The rule and declaration for a appear entirely within the 13 rule. Each of the rules 
styling the navigation menu has been nested one inside the other in a logical, 
intuitive manner and will result in an equally logical and intuitive CSS output. 


12 Save the file. 


* myfirstpage.html EX favorite-styles.sess 


Source Code * favorite-styles.css* Y i color: #000; 
0 50 200 350 200 250 409 3H 400 ado margin: 0; 


+ 2 } 
i iv nav{ 

i 5; background: Siogoyellow; 
| text-align: center; 

| overflow: auto; 


Favorite City Tour nv ul 
| list-style: none; margin: 5px; 
Travel with a purpose yey Nit 
| display: inline-block; 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, esse | a{ 
nemo in maxime dignissimos omnis voluptas molestias veritatis i display: inline-block; 
: ama ssa ee margin: 0; 
/ © nav * 

H padding: 10px 15px; 
pa #ED6; | 2€ color: Slogoblue; 
ee Sete | 7 text-decoration: none; 
overflow: auto; } | 8 background-color: Slightyellow; 
nav ul { j : } 

list-style: none; } 


margin: 5px; } | ~ } 
j 
t 


CSS) a 52 16 Stk fet , 
8 x 216 INS ind sess ¥ INS Lh {Sb 
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The navigation menu in myfirstpage.html is reformatted to display a single line 

of links, side by side. The CSS output file displays several new CSS rules. The new 
rules are not nested as in the source file. They are separate and distinct. And more 
surprising, the selectors have been rewritten to target the descendant structures of 
the menu, such as nav ul li a. As you can see, nesting rules in the SCSS source file 
eliminates the chore of writing complex selectors. 


Importing other style sheets 


To make CSS styling more manageable, many designers split their style sheets into 
multiple separate files, such as one for navigation components, another for feature 
articles, and still another for dynamic elements. Large companies may create an 
overall corporate standard style sheet and then allow various departments or sub- 
sidiaries to write custom style sheets for their own products and purposes. Eventu- 
ally, all these CSS files need to be brought together and called by the webpages on 
the site, but this can create a big problem. 


Every resource linked to a page creates an HTTP request that can bog down the 
loading of your pages and assets. This is not a big deal for small sites or lightly 
traveled ones. But popular, heavily traveled sites with tons of HTTP requests can 
overload a web server and even cause pages to freeze in a visitor’s browser. Too 
many experiences like this can cause visitors to flee. / 


Reducing or eliminating superfluous HTTP calls should be the goal of any designer 
or developer, but especially those working on large enterprise or highly popular 
sites. One important technique is to cut down on the number of individual style 
sheets called by each page. If a page needs to link to more than one CSS file, it’s 
usually recommended that you designate one file as the main style sheet and then 
simply import the other files into it, creating one large universal style sheet. 


In a normal CSS file, importing multiple style sheets would not produce any 
benefit, because the import command creates the same type of HTTP request that 
youre trying to avoid in the first place. But since you are using a CSS preprocessor, 
the import command happens before any HTTP request occurs. The various style 
sheets are imported and combined. Although this makes the resulting style sheet 
larger, this file is downloaded only once by the visitor's computer and then cached 
for their entire visit, speeding up the process overall. 


Let’s see how easy it is to combine multiple style sheets in one file. 
1 Open myfirstpage.html and switch to Split view, if necessary. 
Open favorite-styles.scss and choose Window > Arrange > Tile. 


The two files are displayed side by side to make it easier to edit the CSS and see 
the changes as they occur. 
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2 Inmyfirstpage.html, click favorite-styles.css in the Related Files interface. 


Code view displays the content of favorite-styles.css. It contains the output of 
rules written in the SCSS Source file. 


3 In favorite-styles.scss, insert the cursor before the body rule. 
Type @import "_base.scss"; and press Enter/Return to insert a new line. 


This command imports the contents of the file __base.scss stored in the Sass 
folder. The file was created ahead of time to style other portions of your page. 
At the moment, nothing has changed, because favorite-styles.scss has not been 


saved yet. 


4 Save favorite-styles.scss and observe the changes in myfirstpage.html. 


x myfirstpage.html x favorite~styles.scss 
Y | i /* Sess Document */ 
d 2  $logoyellow: #ED6; 
| 3 $darkyellow: #ED0; 
4 Slightyeliow: #FF3; 
Slogoblue: #069; 
| &  $darkblue: #089; 
| 7  $lightblue: #08A; 
| ’  $font-stack: "Trebuchet MS", Verdana, Arial, Helvetica, 
sans-serif; 
| 9  @import "“base.scss"; 
| ) ¥ body { 
17 font-family: $font-stack; 
| 12 color: #000; 
13 margin: 0; 


Source Code ~ favorite-styles.css 


50 


109 


350 400 Aso 


Param incium Pe | aram inciim 
ee 

* Ses | 14} 

iS ¥ nav{ 


: we 
body { | 16 background: Slogoyellow; 


background: #FFC } text-align: center; 


GSS Vv i355 486x215 yp INS sat {Sb SCSS) Vv INS 13 ch 

If you correctly followed the instructions on how to create the HTML structure 
earlier in this lesson, the page should be entirely formatted now. If you exam- 
ine favorite-styles.css, you will see that more than 100 lines of additional CSS 
styling were inserted before your body rule. Imported content will be added 
starting at line 3. If you need to import the additional styling farther down in 
the style sheet, you can move the @import command. Once the content has 
been imported, normal CSS cascade, inheritance, and specificity take effect. Just 
make sure that all rules and file references appear after the variables; otherwise, 
the variables won't work. 


5 Save and close all files. 


In this section, you created an SCSS file and learned how to work with a CSS pre- 
processor. You experienced various productivity enhancements and advanced func- 
tionality and have glimpsed just a bit of the breadth and scope of what is possible. 
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Learn more about preprocessors 


Check out the following books to learn more about CSS preprocessors and super- 
charging your CSS workflow: 


Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js, by Anirudh 
Prabhu, Apress (2015), ISBN: 978-1484213483 


Instant LESS CSS Preprocessor How-to, by Alex Libby, Packt Publishing (2013), 
ISBN: 978-1782163763 


Jump Start Sass: Get Up to Speed with Sass in a Weekend, by Hugo Giraudel and 
Miriam Suzanne, SitePoint (2016), ISBN: 978-0994182678 


Linting support 


Dreamweaver (2020 release) provides live code error checking. Linting support is 
enabled by default in Preferences, which means the program monitors your code 
writing and flags errors in real time. 


1 Open myfirstpage.html, if necessary, and switch to Code view. 
If necessary, select Source Code in the Related Files interface. 


2 Insert the cursor after the opening <article> tag and press Enter/Return to 
create a new line. ; 


3 Type <h1>Insert headline here 
4 Save the file. 


You failed to close the <h1> element in step 3. When an error occurs, a red X 
will appear at the bottom of the document window whenever you save the page. 


5 Click the @ icon. 


© Note: Dreamweaver 
may create the open- 
ing and closing tags 

at once. If so, delete 

the closing </h1> tag 
before proceeding to 
step 4. 


<article> 
<h1>Insert headline here| 


Line Colurnn 


® 26 3 


Errors / Warnings 


Tag must be paired, missing: { </h1> ], start tag match failed [ <h1> ] on line 24. 


<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit fugiat magnam 


24:37 fag 


body div  #wrapper @® HTML vy INS 


@ Note: You may need to click the Refresh button to display the Linting report. 


The Output panel opens automatically and displays the coding errors. In this 
case, the message says that the tag must be paired and identifies what line it 
thinks the error occurs on. The message erroneously targets line 26, but this can 
happen because of the nature of HTML tags and structures. 


© Note: The Output 
panel can be confusing 
because it cites two line 
numbers. The second 
number indicated is 
more accurate. 
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6 Double-click the error message. 


’ t o) t 


ipsum magni iure sapiente esse debitis, beatae inventore hic nemo alias omnis 
quibusdam placeat!</p> 


<h1>Insert headline here| 
<p class="first">Lorem ipsum dolor sit amet, consectetur adipisici 
commodi minima quaerat recusandae nobis explicabo de 
nobis, fugiat aliquam magni suscipit fugit optio provident 


26 </article> 
7 <aside class="sidebar2"><!--Sidebar 2 should be used for content related to the tour or product-—-> 
28 <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur natus 
blanditiis, laboriosam provident placeat eum, tempora, laborum dolorem temporibus, 
body div #wrapper ® HTML -v-_ INS 26:9 [sp 
Search Ou tput Git Lo » : = 
Line Column — Errors/Warnings 
@ 26 3 Tag DEENRS paired, missing: [ </h1> ], start tag match failed [ <h1> ] on line 24. 
Dreamweaver focuses on the article in the Code view window that it identifies 
as containing the error. Since Dreamweaver is looking for the closing tag for 
the <h1> element, the first closing tag it encounters is </article> and flags it, 
which is incorrect. This behavior will get you close to the error, but often you 
will have to track down the actual issue yourself. Typically, the error will have 
occurred higher, or above the line indicated, in the document. 
7 Insert the cursor at the end of the code 
<h1l>Insert headline here. Type </ 
© Note: If your heading closed automatically in step 3, typing </ will probably not close the 
tag. Check your preference settings for code rewriting and adjust them as desired. 
Dreamweaver should close the <h1> tag automatically. If not, go ahead and 
finish it properly. 
8 Save the file. 
<article> <article> 


<h1>Insert headline here</h1> 

<p class="first">Lorem ipsum dolor sit amet, consectetur adipisici 
commodi minima quaerat recusandae nobis explicabo de 
nobis, fugiat aliquam magni suscipit fugit optio provident 


® © 
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Once the error is corrected, the red ®) is replaced by a green checkmark \). 


9 Right-click the Output panel tab and select Close Tab Group from the 
context menu. 


It’s important to be alert for this icon as you save your work. No other error mes- 
sage will pop up indicating any problems, and you'll want to catch and correct any 
errors before uploading your pages to the web server. 


with Code 


Selecting code 


Dreamweaver provides several methods for interacting with and selecting code in 
Code view. 


Using line numbers 


You can use your cursor to interact with the code in several ways. 


1 Open myfirstpage.html, if necessary, and switch to Code view. 


2 
3 


Scroll down and locate the <nav> element (around line 11). 


Drag the cursor across the entire element, including the menu items. 


Using the cursor in this way, you can select any portion of the code or its 


entirety. However, using the cursor in this way can be prone to error, causing 


you to miss vital portions of the code. At times, using line numbers to select 


whole lines of code is easier. 


Click the line number beside the <nav> tag. 


The entire line is selected within the window. 


Drag down the line numbers to select the entire <nav> element. 


Ow 


<div id="wrapper"> 
<nav><ul> 

<li><a href="#"> Link 1</a></li> 
<li><a href="#"> Link 2</a></li> 
<li><a href="#"> Link 3</a></li> 
<li><a href="#"> Link 4</a></li> 
<li><a href="#">Link 5</a></li> 

</ul></nav> 

<header><h2>Favorite City Tour</h2> 


Dreamweaver completely highlights all seven lines. Using line numbers can save 


a lot of time and avoid errors during selection, but it doesn’t take into account the 


actual structure of the code elements, which may begin and end in the middle of a 


line. Tag selectors provide a better way to select logical code structures. 


Using tag selectors 


One of the easiest and most efficient ways to select code is to use the tag selectors, 


as you will frequently do in upcoming lessons. 


1 Locate the following code: 
<a href="#">Link 1</a> 
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2 Insert the cursor anywhere in the text Link 1. 
Examine the tag selectors at the bottom of the document window. 


Tip: Sometimes the tag selectors do not refresh properly and may not reflect the location of 
the cursor. Try clicking within the element again or on the tag itself. 


The tag selectors in Code view display the <a> tag and all its parent elements, 
the same way they do in Live or Design view. 


3 Select the <a> tag selector. 


11%  <nav><ul> 11%  <nav><ul> 


12 <li><a href="#">Link 1</a></li> 12 <li><a href="#">Link 1</a></li> 
13 <li><a href="#">Link 2</a></li> 13 <li><a href="#">Link 2</a></li> 
14 <li><a href="#">Link 3</a></li> 14 <li><a href="#">Link 3</a></li> 
Bin ome Mane MSR. 0 Se Ae ar atte se bunt, Ma, tude Ao far < fti~ 
body div #wrapper nav ul ti body div #wrapper nay ul uy Lid 
Properties _ Properties 2 


Format None 


- Sri Format None v Class 
a i 


The entire <a> element, including its content, is highlighted in Code view. It 
can now be copied, cut, moved, or collapsed. The tag selectors clearly reveal the 


structure of the code, even without referring to the Code view display. The <a> 
is a child of the <1i> element, which is a child of <ul>, which is in turn a child 
of <nav>, which is a child of <div#wrapper>, and so on. 


The tag selectors make it a simple chore to select any part of the code structure. 


4 Select the <ul> tag selector. 


<div id="wrapper"> 
<nav><ul> 


10 ¥  <divid="wrapper’> 
ii~ <nav><ul> 


<li><a href="#">Link 1</a></li> 12 <li><a hrefS"#">Link 1</a></li> 
13 <li><a href="#">Link 2</a></li> 13 <li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 14 <li><a href="#">Link 3</a></li> 
15 <li><a href="#">Link 4</a></li> 15 <li><a href="#">Link 4</a></li> 
16 <li><a href="#">Link 5</a></li> 16 <li><a href"#">Link 5</a></li> 
</ul></nav> 17 </ul></nav> 
18 <header><h2>Favorite City Tour</h2> 18 <header><h2>Favorite City Tour</h2> 


body diy #wrapper nay body dis @wrapper — nav 


Properties 


Format None 


Format None v Class ( None 


The code for the unordered list is entirely selected. 
5 Select the <nav> tag selector. 


The code for the entire menu is selected. 
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6 Select the <div#wrapper> tag selector. 


10¥ au weer = eee 


cis <a hrefe"#’s 
16 <li><a href="#" S</a></li> 
17 oe ea 
18 cheadermehoo Favorite City Tour</h2> : 
19 <p>Travel with a pape hn ieader= 
20 ¥  <main id="content"> 


a diy 3 #wrapper pay ul 
x 


Properties 


e + EASES (one DivID Class CSS Desig 


_ </ul></nav> 

18 <header><h2>Favorite City Tour</h2> 

1 <p>Travel with a purpose</p></header> 
20 ¥ <mainid="content"> 


body div > #wrapper nay > 
alt 


Properties ees 


nw 


<div id="wrapper'> 


The code for the content of the page is now entirely selected. Using the tag selec- 
tors allows you to identify and select the structure of any element on your page, but 
it requires you to identify and select the parent tag yourself. Dreamweaver offers 
another tool that can do it for you automatically. 


Using parent tags 


Using the parent tag selector in the Code view window makes the job of selecting 
the hierarchical structure of your page even simpler. 


1 Choose Window > Toolbars > Common to display the Common toolbar, if 
necessary. 


2 Insert the cursor anywhere in the text Link 1. 
® Note: The Select Parent Tag icon may not be displayed by default in the Common tool- 


bar. Click the Customize Toolbar icon «** and enable the tool before proceeding to step 3, 
if necessary. 


3 In the Common toolbar, click the Select Parent Tag icon &. 


11% <nav><ul> 11 ¥ <nav><ul> 


y 12 <li><a href="#">Link 1 </a></li> < 12 <li><a href="#">Link 1</a></li> 
aS 13 <li><a href="#">Link 2 </a></li> 8 13 <li><a href="#">Link 2</a></li> 
’ 14 <li><a href="#">Link 3 </a></li> k 14 <li><a href="#">Link 3</a></li> 

peg <li><a href="#">Link 4 </a></li> As / <li><a href="#">Link 4</a></li> 


” <li><a href="#">Link 5 </a></li> 16 <li><a href="#">Link 5</a></li> 


The entire <a> element is highlighted. 
4 Click the Select Parent Tag icon ®® again or press Ctrl+[/Cmd+| (left bracket). 


The entire <1i> element is selected. 
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5 Click the Select Parent Tag icon &. 


11% <nav><ul> 11% <nav><ul> 
vy 12 <li><a href="#">Link 1</a></li> 12 <li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 13 <li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 14 <li><a hrefe"#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 15 <li><a href="#" >Link 4</a></li> 
1 <li><a href="#">Link 5</a></li> 16 <li><a href="#">Link 5</a></li> 
Bay 17 </ul></nav> 17 </ul></nav> 


The entire <ul> element is selected. 
6 Press Ctrl+[/Cmd+[ until <div#wrapper> is selected. 


Each time you click the icon or press the shortcut key, Dreamweaver selects the 
parent element of the current selection. Once you've selected it, you may find 
working with long sections of code unwieldy. Code view offers other handy options 
to collapse long sections to make them easier to work with. 


Collapsing code 


Collapsing code is a productivity tool that makes a simple process out of copying or 
moving large sections of code. Coders and developers also collapse code sections 
when they are looking for a particular element or section of a page and want to 
temporarily hide unneeded sections from view. Code can be collapsed either by 
selection or by logical element. 


1 Select the first three Link items in the <nav> element. 


Note the Collapse icon W along the left edge of Code view. 
The Collapse icon W indicates that the selection is currently expanded. 


2 Click the Collapse icon YW to collapse the selection. 


10" <div id="wrapper"> 

* <nav><ul> 
<li><a href="#">Link 1</a></li> 
<li><a href="#">Link 2</a></li> 
<li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 

</ul></nav> 


10¥ <div id="wrapper"> 
1i¥ <nav><ul> 


slink i</a.) <li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
</ul></nav> 
18 <header><h2>Favorite City Tour</h2> 
19 <p>Travel with a purpose</p></header> 
20 ¥  <main id="content"> 


The selection collapses, showing only the first <li> element and a See of 
text from it. 


You can also collapse code based on logical elements, like <ul> or <nav>. 
Notice that each line that contains an opening element tag also displays a 
Collapse icon. 


3 Click the Collapse icon W beside the line for the <nav> element. 
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The entire <nav> element collapses in the Code window, showing only an abbrevi- 
ated snippet of the entire element. In either instance, the code hasn't been deleted 
or damaged in any way. It still functions and operates as expected. Also, the col- 
lapse functionality appears only in Code view in Dreamweaver; on the web or in 
another application, the code will appear normally. To expand the code, just reverse 
the process, as described in the following section. 


Expanding code 


When the code is collapsed, you can still copy, cut, or move it like you would any 
other selected element. You can then expand elements one at a time or all at once. 


1 Click the Expand icon ® beside the line for the <nav> element. 


9 ¥ <body> 
joie <div id="wrapper"> 


Cy deeae <li><a href="#">... 
<header><h2>Favorite City Tour</h2> 


i9 <p>Travel with a purpose</p></header> 
0 


9 ¥ <body> 

Ow <div id="wrapper"> 

1% <nav><ul> 

12 »* <li><a href="#">Link 1</a... <li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 


20 ¥ <main id="content"> </ul></nav> 
2 <aside class="sidebar1"><!--insert customer tes <header><h2>Favorite City Tour</h2> 
22 <p class="first">Lorem ipsum dolor sit amet, <p>Travel with a purpose</p></header> 

veritatis cupiditate repudiandae qua ¥v  <mainid="content"> 
23 </aside> <aside class="sidebar1"><!--insert customer testimonials in 
24¥ <article> / <p class="first">Lorem ipsum dolor sit amet, consectetur 
25 <hi>insert headline here</h1> A veritatis cupiditate repudiandae quam temporiby 


The <nav> element expands, but the three <1i> elements collapsed in the 
previous exercise are still collapsed. 


2 Click the Expand icon ® beside the line for the <1i> elements. 


All collapsed elements are now expanded. Note that the Expand icon for the three 
<1i> elements disappears altogether. 


Accessing Split Code view 


Why should coders be denied the ability to work in two windows at the same time? 
Split Code view enables you to work in two different documents or two different 
sections of the same document at once. Take your pick. 


1 If necessary, switch to Code view. 


2 Choose View > Split > Code-Code. 


@ Dreamweaver File Edit 


Insert Tools Find Site Window Help 
_v Code 


while Code-Live 
__% myfirstpage.html _ ViewMode > — Code-Design 
9 ‘Source Code favorite-styles.css Switch Views wees 
y 3-¥ <head> is 
ay, 4 <link href="css/fai Live Code 
es 5  <metacharset="UTI Inspect Xr 
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The document displays two Code view windows, both focusing on 


myfirstpage.html. 
3 Insert the cursor in the top window and scroll down to the <footer> element. 


Split Code view enables you to view and edit two different sections of the 


same file. 


4 Insert the cursor in the bottom window and scroll to the <header> element. 


@ Dreamweaver File Edit View Insert Tools Find Site Window Help we Bt we i 
eee SS TT 
ese Code Split" Live v 


x myfirstpage.html 
Q Source Code favorite-styles.css i 


nt natus blanditiis, laboriosam provident placeat eum, tempora, laborum dolorem 
i temporibus, enim totam rerum. Sequi, eius laudantium nemo nisi voluptates 
possimus quam!</p> 


</aside> 
ax </main> 
¥ 2 <footer>Copyright 2021 Favorite City Tour. All rights reserved.</footer></div> 
* </body> 
a » </html> 


a <li><a href="#">Link 2</a></li> 
Ye <li><a href="#">Link 3</a></li> 
<li><a href="#">Link 4</a></li> 
<li><a href="#">Link 5</a></li> 
</ul></nav> 
k <header><h2>Favorite City Tour</h2> 
j <p>Travel with a purpose</p></header> 
<main id="content"> 
,. <aside class="sidebar1"><!~insert customer moni 


body diy #wrapper @ HTML vy INS 33:2 ya 


You can also view and edit the contents of any related file. 
5 In the Related Files interface, select favorite-styles.css. 


The window loads the style sheet into one of the windows. You can work in either 
window and save your changes in real time. Dreamweaver displays an asterisk (*) 
on any filename in the interface that has been changed but not saved. If you select 
File > Save or press Ctrl+S/Cmd+S, Dreamweaver saves the changes in the docu- 
ment where your cursor is inserted. Since Dreamweaver can make changes to 
documents even when they are not open, this feature allows you to edit and update 
even the files that are closed but linked to your webpage. 


Previewing assets in Code view 


Although you may be a diehard coder or developer, there’s no reason why you can't 
feel the love from Dreamweaver’s graphical display too. The program provides 
visual previews of graphic assets and certain CSS properties in Code view. 
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1 Open myfirstpage.html. Select Code view. 


In Code view, you see only the HTML. The graphical assets are simply refer- 
ences that appear in the CSS file favorite-styles.css. 


2 Click favorite-styles.css in the Related Files interface. 


The style sheet appears in the window. Although it’s fully editable, don’t 
waste your time making any changes to it. Since the file is the output of the 
SCSS source file, any changes you make will be overwritten the next time the 
file compiles. 


3 Locate the header rule (around line 6). 


The header consists of two text elements and two images. You should be able to 
see the image references in the background property. 


4 Position the cursor over the markup url(../images/favcity-logo.jpg) in 
the background property (line 9). 


| 3 body { 
4 background: #FFC:} 


6 w header { 

7 text-align: ceni 1200212 pixels 

8 padding: 30px TOR re 

g background: url("../images/favcit¥-logo,jpg"); 
background-repeat: no-repeat; 
background-size: auto 100%; 


A miniature preview of the Favorite City logo image appears below the cursor. 


5 Position the cursor over the markup background-color: #ED6; in the 
background property. 


6 w header { 
7 text-align: center; 
8 padding: 30px 107>~ 
9 background: url(" aA s/favcity-logo.jpg"); 
10 background-repe peat; 
11 background-size: atit.}- 100%; 
background-color: #£D6; 
border-bottom: solid 1px #ED6; 


A small color chip appears, displaying the color specified. The preview functions 
the same way for all color models. You no longer have to guess what image or color 
you specified before you can see it in Live view or the browser. 


In this lesson, you learned a number of techniques to make working with code 
easier and more efficient. You learned how to write code manually using hint- 
ing and auto-code completion and how to write code automatically using Emmet 
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shorthand. You learned how to check code construction using built-in linting sup- 
port. You learned how to select, collapse, and expand code, as well as how to create 
HTML comments and view code in different ways. 


Overall, you learned that whether you are a visual designer or a hands-on coder, 
you can rely on Dreamweaver to offer vital features and power that will allow you 
to create and edit HTML code without compromises. Remember these techniques 
as you work through the book and use any of them whenever appropriate. 
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Review questions 


uu F&F WwW N 


In what ways does Dreamweaver assist you in creating new code? 

What is Emmet, and what functionality does it provide to users? 

What do you have to install to create a LESS, Sass, or SCSS workflow in Dreamweaver? 
What feature in Dreamweaver reports code errors when you save a file? 


True or false: Collapsed code will not appear in Live view or the browser until it 
is expanded. 


What Dreamweaver feature provides instant access to files linked or referenced within 
the document? 


Review answers 


1 


Dreamweaver provides code hinting and auto-completion for HTML tags, attributes, 
and CSS styling as you type, along with support for ColdFusion, JavaScript, and PHP, 
among other languages. 


Emmet is a scripting toolkit that creates HTML code by converting shorthand entries 
into complete elements, placeholders, and even content. 


No additional software or services are needed to use LESS, Sass, or SCSS. Dream- 
weaver supports these CSS preprocessors out of the box. You merely have to enable 
the compiler in the Site Definition dialog. 


Linting checks the HTML code and structure every time you save a file and then dis- 
plays a red X icon at the bottom of the document window when an error is detected. 


False. Collapsing code has no effect on the display or operation of the code outside 
of the Code view window in Dreamweaver. 


The Related Files interface appears at the top of the document window and enables 
users to instantly access and review CSS, JavaScript, and other compatible file types 
linked to the webpage. In some cases, a file displayed in the interface will be stored on 
a remote resource on the internet. Although the Related Files interface enables you to 
view the contents of all the files displayed, you will be able to edit only the ones stored 
on your local hard drive. 
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CSS BASICS 


Lesson overview 


In this lesson, you'll familiarize yourself with CSS and learn: 


CSS (cascading style sheets) terms and terminology. 
The difference between HTML and CSS formatting. 
Different methods for writing CSS rules and markup. 


How the cascade, inheritance, descendant, and specificity theories 
affect the way browsers apply CSS formatting. | 


New features and capabilities of CSS3. 


This lesson will take about 1 hour to complete. To get the lesson files 
used in this chapter, download them from the web page for this book at 
www.adobepress.com/DreamweaverCIB2020. For more information, see 
“Accessing the Lesson Files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 
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Cascading style sheets control the look and feel of a 
webpage. The language and syntax of CSS are com- 
plex, powerful, and endlessly adaptable. CSS takes 
time and dedication to learn and years to master, but 
a modern web designer can't live without it. 
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What is CSS? 


HTML was never intended to be a design medium. Other than allowing for bold 
and italic, version 1 lacked a standardized way to load fonts or even format text. 
Formatting commands were added along the way—up to version 3 of HTML— 

to address these limitations, but these changes still weren’t enough. Designers 
resorted to various tricks to produce the desired results. For example, they used 
HTML tables to simulate multicolumn and complex layouts for text and graph- 
ics, and they used images when they wanted to display typefaces other than Times 
or Helvetica. 


HTML-based formatting was so misguided a concept that it was deprecated from 
the language less than a year after it was formally adopted in favor of cascading 
style sheets (CSS). CSS avoids all the problems of HTML formatting while saving 
time and money too. Using CSS lets you strip the HTML code down to its essential 
content and structure and then apply the formatting separately so that you can 


more easily tailor the webpage to specific devices and applications. 
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Looking at the final design (left) you would never have guessed it was created using HTML tables 
and images. So, we added some extra padding so you could see the actual construction (right). 


HTML vs. CSS formatting 


When comparing HT'ML-based formatting to CSS-based formatting, it’s easy to 
see how CSS produces vast efficiencies in time and effort. In the following exercise, 
you'll explore the power and efficacy of CSS by editing two webpages, one format- 
ted by HTML and the other by CSS. 


1 Launch Dreamweaver (2020 release) or later, if it’s not currently running. 


2 Create a new site based on the lesson04 folder, using the instructions in the 
“Getting Started” section at the beginning of the book. Name the site lesson04. 
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3 Choose File > Open. 
4 Navigate to the lesson04 folder, and open html-formatting.html. 


5 Click the Split view button. If necessary, choose View > Split > Split Vertically to @ Note: Code and 


split Code and Live view windows vertically, side by side. Live view windows can 
be swapped top to 

Note how each element of the content is formatted individually using the bottom and left to right 

deprecated <font> tag and the attribute color="blue" in each <h1> and by selecting the option 


under the View menu. 
See Lesson 1, “Custom- 
izing Your Workspace,’ 
for more information. 


<p> element. 


© Note: Deprecated means that the tag has been formally removed from future support in 
HTML but may still be honored by current browsers and HTML readers. 


6 Replace the word "blue" with "green" in each <h1> element in which it 
appears. If necessary, click the mouse cursor in the Live view window to update 


the display. 
* htmi-formatting.htm! (XHTML)* 
¥ 2 ne ES ae ee aa 30 oO 10 <h1><font face="Verdana" size="5" 
a = pea : color="green">ROSENCRANTZ</font></h1 > 
ROSENCRANTZ 11 <p> <font face="Verdana" size="4" color="blue">I understand 
you not, my lord.</font></p> 
12 <hi><font face="Verdana" size="5" 
I understand you not, my lord. ¢olor="green">HAMLET</font></h1> 
13 ¥ <p> <font face="Verdana" size="4" color="blue">1 am glad of it:a 
HAMLET knavish speech sleeps in a foolish ear.</font></p> 


<h1><font face="Verdana" size="5" 
color="green">ROSENCRANTZ</font></h1> 


I am glad of it: a knavish speech sleeps in a <p> <font face="Verdana’ size="4" color="blue">1 understand 


foolish ear. you not, my lord.</font></p> 
- i6 <hl><font face="Verdana’ size="5" 
ROSE NCRANTZ color="green">HAMLET</font></h1> 


<p> <font face="Verdana” size="4" color="blue">I am glad of it: a 
knavish speech sleeps in a foolish ear.</font></p> 

publes<font face="Verdana” size="5" | 

color="green"> feta fe 2ir-</font> ay > 


HAMLET 19 <p> <font fate="Verdana" size="4" color="blue">My lord, you 
must tell us where the body is, and go with us to the king. 


De SE A OA a Ope a) Sas ce eS ees PY) PCa 


I understand you not, my lord. 


Q@ HTML > 477x385 - INS 18:45 (Sb 


The <h1> elements display in green now in each line where you changed the 
color value. As you can see, formatting using the obsolete <font> tag is not 
only slow but also prone to error. Make a mistake, like typing greeen or geen, 
and the browser will ignore the color formatting entirely. 


7 Open css-formatting.html from the lesson04 folder. 
8 If it’s not currently selected, click the Split view button. 


The content of the file is identical to the previous document, except that it’s 
formatted using CSS. The code that formats the HTML elements appears in the 
<head> section of this file. Note that the code contains only two color:blue; 
attributes. 
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% html-formatti 


9 


ROSENCRANTZ 


I understand you not, my lord. 


html (XHTML)S X= css-formatting.htmi* 
ca) 19) 209 250 300 


9 Inthe property for the h1 rule color: blue; select the value blue and type 
green to replace it. If necessary, click in the Live view window to update 


the display. 


350 aS 450 


<style type="text/css"> 

<!-- 

? » hi { font-family: Verdana; 
font-size: 20pt; 

' 9 color: green} 

Oe p {font-family Verdana; 

font-size: 12pt; 


HAM LET 12% color: blue;} 
e 13 => 
I am glad of it: a knavish speech sleeps in a foolish ear. § 14 </style> 
</head> 
ROSENCRANTZ 
: 17 ¥ <body> 
My lord, you must tell us where the body is, and go with * 18 <hi>ROSENCRANTZ</h1> 


us to the king. 


HAMLET 


The body is with the king, but the king is not with the 
bodv. The kina is a thina-- 


© Note: Dreamweaver 
usually defaults to Live 
view when you open 

or create a new page. 

If not, you may select 

it from the Document 
toolbar using the Live/ 
Design dropdown. 
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19 <p>l understand you not, my lord.</p> 

| 20 <h1>HAMLET</h1> 

| 21 <p>lam glad of it: a knavish speech sleeps in a foolish ear.</p> 
22. <hi>ROSENCRANTZ</h1> 

| 23. <p>My lord, you must tell us where the body is, and go with us 
to the king.</p> 


@ HTL vy 477x385 ~ INS 12:13 {So 


In Live view, all the heading elements display in green. The paragraph elements 
remain blue. 


10 Select the value in the p rule color: blue; and type green to replace it. Click 
in the Live view window to update the display, if necessary. 


In Live view, all the paragraph elements have changed to green. 
11 Close all files and do not save the changes. 


In this exercise, CSS accomplished the color change with two simple edits, whereas 
using the HTML <font> tag required you to edit every line individually. Now think 
how tedious it would be to go through thousands of lines of code and hundreds of 
pages on a site to make such a change. Is it any wonder that the W3C, the web stan- 
dards organization that establishes internet specifications and protocols, depre- 
cated the <font> tag and developed cascading style sheets? This exercise highlights 
just a small sample of the formatting power and productivity enhancements offered 
by CSS, unmatched by HTML alone. 


HTML defaults 


Since the very beginning, HTML tags came right out of the box with one or more 
default formats, characteristics, or behaviors. So even if you did nothing, much of 
your text would already be formatted in a certain way in most browsers. One of the 
essential tasks in mastering CSS is learning and understanding these defaults and 
how they may affect your content. Let’s take a look. 


1 Open html-defaults.html from the lesson04 folder. If necessary, select Live 


view to preview the contents of the file. 


The file contains a range of HTML headings and text elements. Each ele- 
ment visually exhibits basic styling for traits such as size, font, and spacing, 


among others. 
2 Switch to Split view. 


xX html-defaults.htmt 
4 180 200 280 300 350 4o0 


Heading 1 


Heading 2 


Heading 3 

Heading 4 

Heading 5 

Heading 6 

HTML was created to display text in a browser. Rudimentary 
formatting was built in to each element to help in identifying the 


semantic significance of the content. Default formatting can be 
modified by: 


<!DOCTYPE HTML> 


¥ <htm!> 
¥ <head> 


<title>HTML Default Styling (CSS)</title> 
</head> 


* <body> 


<h1>Heading 1</h1> 

<h2>Heading 2</h2> 

<h3>Heading 3</h3> 

<h4>Heading 4</h4> 

<hS>Heading 5</h5> 

<h6>Heading 6</h6> 

<p>HTML was created to display <strong>text</strong> ina 
<em>browser</em>. Rudimentary formatting was built in to 
each element to help in identifying the semantic significance of 
the content. Default formatting can be modified by:</p> 


t-¥ <ul> 


<li>The browser itself</li> 


6  <li>User interaction, and </li> 


<li>Cascading Style Sheets</li> 


@ HTML ~v 


477x385 ~ 


3 In the Code view window, locate the <head> section, and try to identify any 


code that may be formatting the HTML elements. 


A quick look will tell you that there is no overt styling information in the file, yet 
the text still displays different kinds of formatting. So where does the formatting 
come from? And more importantly, what are the settings being used? 


The answer is: It depends. In the past, HTML 4 elements drew characteristics 
from multiple sources. The first place to look is the W3C. For HTML 4 it 
created a default style sheet, which you can find at www.w3.org/TR/CSS21/ 
sample.html. The style sheet defines the standard formatting and behaviors of 
all HTML elements. The browser vendors used this style sheet to base their 
default rendering of HTML elements. But that was before HTML5. 


4 Close htm-defaults.html and do not save any changes. 


HTMLS5 defaults? 


The last decade has seen a consistent movement on the web to separate content 
from its styling. At the time of this writing, the concept of default formatting in 
HTML seems to be dead. According to specifications adopted by the W3C in 2014, 
there are no default styling standards for HTML5 elements. If you look for a default 
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© Note: If the cur- 
rent trends continue, 
the lack of an HTML5 
default style sheet 
makes the develop- 
ment of your own site 
standards even more 
important. 
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style sheet for HTML5 on w3.org—like the one identified earlier for HTML 4—you 
won't find one. As of this writing, there are no public moves to change this relation- 
ship, and browser manufacturers are still honoring and applying HTML 4 default 
styling to HTML5-based webpages. Confused? Join the club. 


The ramifications of this trend could be dramatic and wide reaching. Someday, in 
the not-too-distant future, HTML elements may not display any formatting at all 
by default. That means that understanding how elements are currently formatted is 
more important than ever so that you will be ready to develop your own standards 
if or when the need arises. 


To save time and give you a bit of a head start, I pulled together Table 4.1, with 
some of the most common defaults. 


Table 4.1 Common HTML defaults 


ITEM DESCRIPTION 

Background In most browsers, the page background color is white. The background 
of the elements <div>, <table>, <td>, <th>, and most other tags is 
transparent. 

Headings Headings <h1> through <h6> are bold and align to the left. The six 


heading tags also apply differing font size attributes, with <h1> the 
largest and <h6> the smallest. Apparent sizes may vary between 
browsers. Headings and other text elements may also display additional 
spacing (margins) above or below. 


Body text Outside of a table cell, paragraphs—<p>, <li>, <dd>, <dt>—align to 
the left and start at the top of the page. 


Table cell text Text within table cells, <td>, aligns horizontally to the left and vertically 
to the center. 


Table header Text within header cells, <th>, aligns horizontally and vertically to the 


Fonts Text color is black. Default typeface and font are specified and supplied 
by the browser, which in turn can be overridden by the user using the 
preference settings in the browser itself. 


Margins Spacing external to the element border/boundary is handled by 
margins. Many HTML elements feature some form of margin spacing. 
Margins are often used to insert additional space between paragraphs 
and to indent text, as in lists and blockquotes. 


Padding Spacing within the box border is handled by padding. According to the 
default HTML 4 style sheet, no elements feature default padding. 


Browser antics 


The next task in developing your own styling standards is to identify the browser 
(and its version) that is displaying the HTML. That's because browsers frequently 
differ (sometimes dramatically) in the way they interpret, or render, HTML ele- 
ments and CSS formatting. Unfortunately, even different versions of the same 
browser can produce wide variations from identical code. 


Web design best practices dictate that you build and test your webpages to make 
sure they work properly in the browsers employed by the majority of web users in 
general—but especially the browsers preferred by your own visitors. The break- 
down of browsers used by your own visitors can differ quite a bit from the norm. 
They also change over time—especially now, as more and more people abandon 
desktop computers in favor of tablets and smartphones. In July 2019, the W3C 
published the following statistics identifying the most popular browsers from the 
50 million visitors they receive each year on their website: 


Although it’s nice to know 
which browsers are the 
most popular among the 
general public, it’s crucial 
that you identify the 
browsers your target audi- 
ence uses before you build 


. and test your pages. 
— Edge/IE 3.9% 
Safari 3.2% 


Chrome 79% Opera 1.6% 
Other 1.4% 


Although this chart shows the basic breakdown in the browser world, it obscures 
the fact that multiple versions of each browser are still being used and browsers are 
updated constantly. This is important to know because older browser versions are 
less likely to support the latest HTML and CSS features and effects. To make mat- 
ters more complicated, these statistics show trends for the Internet overall, but the 
statistics for your own site may vary wildly. 


As HTML5 becomes more widely supported, the inconsistencies will fade, although 
they may never go away. Some aspects of HTML 4 and CSS 1 and 2 are still not 
universally agreed upon to this day. It’s vital that any text styling or page structure 
be tested carefully. Occasionally, you will find that you must create custom CSS 
styling to contend with issues in one or more browsers. 
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The box model is a 
programmatic construct 
imposed by HTML and 
CSS that enables you to 
format, or redefine, the 
default settings of any 
HTML element. 


* boxmodel.html* 
0 $9 109 


This sample paragraph demonstrates the power of the CSS box model. This 
bold. and italic. 
renders each HTML element. 


paragraph displays text in 
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CSS box model 


Browsers normally read the HTML code, interpret its structure and formatting, 
and then display the webpage. CSS does its work by stepping between HTML and 
the browser, redefining how each element should be rendered. It imposes an imagi- 
nary box around each element and then enables you to format almost every aspect 


of how that box and its contents are displayed. 


TOP BORDER 
\ 


LNs ; 
LEFT BORDER =< 


ct te 


| y ~ WS ~TOPPADDING — . 


a | % 

| ———— f 

ee | BO OM PADDING _ ‘ 

s TTC = ™ RIGHT BORDER 


Sy 


BOTTOM BORDER 


CSS permits you to specify fonts, line spacing, colors, borders, background shading 
and graphics, margins, and padding, among other things. Most of the time these 
boxes are invisible, and although CSS gives you the ability to format them, it doesn’t 
require you to do so. 


1 Launch Dreamweaver (2020 release or later), if necessary. 
Open boxmodel.html from the lesson04 folder. 


2 If necessary, switch to Split view. 


20 ¥ <body> 

21 ¥ <div class="box_model"> 

22. <h1>This example displays the Box Model</h1> 

!3 <p> This sample paragraph demonstrates the power of 
the CSS box model. This paragraph displays text in 
<strong>bold</strong> and <em>italic.</em> CSS can 
control how browsers renders each HTML element. </p> 
<p>Remember, with great power comes great 
responsibility.</p> 

28 </div> 

26 </body> 

</html> 


CSS can control how browsers 


YO Tmt ~ 


$9Sx273 ~~. INS 29:3 
The file’s sample HTML code contains a heading and two paragraphs with 
sample text formatted to illustrate some of the properties of the CSS box model. 
The text displays visible borders, background colors, margins, and padding. 

To see the real power of CSS, sometimes it’s helpful to see what the page would 
look like without CSS. 


3 Switch to Design view. ® Note: The Style 


Choose View > Design View Options > Style Rendering > Display Styles to dis- Rendering command 
able style rendering. Pema 
Design view. 
@ Dreamweaver file Edit [VEN insert Tools Find Site Window Help 3PF Gao 
| @26 _ Code ee 
Split S| Code Split Design 
x boxmodel.htmi* | View Mode >! 
®. This example ¢ swe» views ~ Model | eee 
wae : i i 21 ¥ <div class="be 
ai Live Code . i 22. <h1>This exar 
____ ‘This sample paragraph demons _|nspect NX rn del. This paragraph i Ba) ees Thicccan 
displays text in bold and italic. Jers each HTML element. | ae eC | 
| : Code View Options the CSS box rr | 
ee F i <strong>bold 
Rem swith great power Gat ye cm oscian View ——— pty ers 
&, Design View Options > Visual Aids >| 24 <p>Remembe 
Related Files > Style Rendering > Display Styles 
®, Related Files Options > Guides > Increase Text Ske 
is ' Tracing Ima > D Text Si 
% Full Screen ASF ees ee > Ee . Sear oe ae 


Dreamweaver now displays the page without any applied styling. A basic tenet 
in web standards today is the separation of the content (text, images, lists, and 
so on) from its presentation (formatting). Although the text now is not wholly 
unformatted, it’s easy to see the power of CSS to transform HTML code. 
Whether the text is formatted or not, this illustrates the importance of the 
structure and quality of your content. Will people still be enthralled by your 
website if all the wonderful formatting were pulled away? 


4 Choose View > Design View Options > Style Rendering > Display Styles to 
enable the CSS rendering in Dreamweaver again. 


5 Close all files, and do not save changes. 


The working specifications found at www.w3.org/TR/css3-box describe how the 
box model is supposed to render documents in various media. 


Applying CSS styling 


You can apply CSS formatting in three ways: inline (on the element itself), embed- 
ded (in an internal style sheet), or linked (via an external style sheet). A CSS format- 
ting instruction is known as a rule. A rule consists of two parts—a selector and 

one or more declarations. The selector specifies what element, or combination of 
elements, is to be formatted; declarations contain the styling information. CSS rules 
can redefine any existing HIML element, as well as define two custom element 


modifiers, named “class” and “id.” 


A rule can also combine selectors to target multiple elements at once or to target 
specific instances within a page where elements appear in unique ways, such as 
when one element is nested within another. 
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Sample CSS Rule Construction 


Selector Declaration Declaration 
HTML Element —p { color: red; font-family: Verdana; } 


Multiple —th, td { font-weight: bold; padding: 4px; } 
Descendant —div p { font-size: 95%; margin-top: 5px; } 
Class — ctr { text-align: center; line-height: 16px; } 


id —#hdr_ { background-color: black; color: white; } 


Srey Semen ae ea a 


Property Value Property Value 


These sample rules demonstrate some typical constructions used in selectors and 
declarations. The way the selector is written determines how the styling is applied 
and how the rules interact with one another. 


Applying a CSS rule is not a simple matter of selecting some text and applying a 
paragraph or character style, as in Adobe InDesign, Adobe Illustrator, or Microsoft 
Word. CSS rules can affect single words, paragraphs of text, or combinations of text 
and objects. A single rule can affect an entire webpage, a single paragraph, or just a 
few words or letters. Basically, anything that has an HTML tag on it can be styled, 
and there is even an HTML tag (span) specifically intended to style content that 
has no tag. 


Many factors come into play in how a CSS rule performs its job. To help you better 
understand how it all works, the following sections illustrate four main CSS con- 
cepts, which I'll refer to as theories: cascade, inheritance, descendant, and specificity. 


Cascade theory 


The cascade theory describes how the order and placement of rules in the style 
sheet or on the page affects the application of styling. In other words, if two rules 
conflict, which one wins out? 


Take a look at the following rules that might appear in a style sheet: 


fa) 3 Colors trerls } 
pi color: blues. } 


Both rules apply text color to the paragraph <p> tag. Since they style the same 
element, they cannot both win. According to the cascade theory, the rule declared 
last, or closest to the HTML code, wins. That means, in this case, the text would 
appear in blue. 


CSS rule syntax: write or wrong “* 


CSS is a powerful adjunct to HTML. It has the power to style and format any HTML element, but the 
language is sensitive to even the smallest typo or syntax error. Miss a period, comma, or semicolon 
and you may as well have left the code out of your page entirely. Even worse, an error in one rule may 
cancel all the styling in subsequent rules or the entire style sheet. 


For example, take the following simple rule: 


Pie padding. dipx: 
margin: 10px; } 


It applies both padding and margins to the paragraph <p> element. 
This rule can also be written properly without spacing as: 
p{padding:1px;margin:10px;} 


The spaces and line breaks used in the first example are unnecessary, merely accommodations for the 
humans who may write and read the code. Removing excess spacing is known as minification and is 
often used to optimize style sheets. Browsers and other applications processing the code do not need 
this extra space, but the same cannot be said of the various punctuation marks sprinkled throughout 
the CSS. 


Use parentheses ( ) or brackets [ ] instead of braces { }, and the rule (and perhaps your entire 
style sheet) is useless. The same goes for the use of colons : and semicolons 3 in the code. 


Can you catch the errors in each of the following sample rules? 

p { padding; 1px: margin; 10px: } 

p { padding: 1px; margin: 10px; ] 

p { padding 1px, margin 10px, } 

Similar problems can arise in the construction of compound selectors too. For example, putting a 
space in the wrong place can change the meaning of a selector entirely. 


Therulearticle.content { color: #F0O } formats the <article> element and all its 
children in this code structure: 


<article class="content"><p>...</p></article> 


On the other hand, the rule article .content { color: #F00O } would ignore the previous 
HTML structure altogether and format only the <p> element in the following code: 


<article class="content"><p class="content">...</p></article> 


A tiny error can have dramatic and far-reaching repercussions. To keep their CSS and HTML function- 
ing properly, good web designers keep their eyes peeled for any little error, misplaced space, or punc- 
tuation mark. As you work through the following exercises, keep a careful eye on all the code for any 
similar errors. As mentioned in the “Getting Started” section, some instructions in this book may omit 
an expected period or other punctuation in a sentence on purpose when including it might cause 
confusion or possible code errors. 
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When you try to determine which CSS rule will be honored and which formatting 
will be applied, browsers typically honor the following order of hierarchy, with 
number 4 being the most powerful: 


1. Browser defaults. 


2. External or embedded style sheets. If both are present, the one declared last 
supersedes the earlier entry when there’s a conflict. 


3. Inline styles (within the HTML element itself). 


4. Styles with the value attribute ! important applied. 


Inheritance theory 


The inheritance theory describes how an element can be affected by one or more 
rules at the same time. Inheritance can affect rules of the same name as well as 
rules that format parent elements—ones that contain other elements. Take a look at 
the following code: 


<article> 
<hi>Pellentesque habitant</h1> 
<p>Vestibulum tortor quam</p> 
<h2>Aenean ultricies mi vitae</h2> 
<p>Mauris placerat eleifend leo.</p> 
<h3>Aliquam erat volutpat</h3> 
<p>Praésent dapibus, neque id cursus.</p> 
</article> 


The code contains various headings and paragraph elements and one parent ele- 
ment <article> that contains them all. If you wanted to apply blue to all the text, 
you could use the following set of CSS rules: 


mk f COLORS lollues } 
h2 { color: blue; } 
ns 4 COUlOrSs lowes | 
p { color: blue; } 


‘That’s a lot of code all saying the same thing, something most web designers typi- 
cally want to avoid. This is where inheritance comes into play to save time and 
effort. Using inheritance you can replace all four lines of code with this: 


article { color: blue;} 


That's because all the headings and paragraphs are children of the article ele- 
ment; they each inherit the styling applied to their parent, as long as there are no 
other rules or presets overriding it. Inheritance can be of real assistance in econo- 
mizing the amount of code you have to write to style your pages. But it’s a double- 
edged sword. As much as you can use it to style elements intentionally, you also 
have to keep an eye out for unintentional effects. 
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Descendant theory 


Inheritance provides a means to apply styling to multiple elements at once, but CSS 
also provides the means to target styling to specific elements based on the HTML 
structure. 


The descendant theory describes how formatting can target specific elements based 
on their position relative to other elements. This technique involves the creation of 
a selector name that identifies a specific element, or elements, by combining mul- 
tiple tags and, in some cases, id and class attributes. 


Take a look at the following code: 


<section><p>The sky is blue</p></section> 
<div><p>The forest is green.</p></div> 


Notice how neither paragraph contains intrinsic formatting or special attributes, 
although they do appear in different parent elements. Let’s say you wanted to apply 
blue to the first line and green to the second. You would not be able to do this using 
a single rule targeting the <p> tag alone. But it’s a simple matter using descendant 
selectors, like these: 


section p { color: blue;} 
div p { color: green;} 


See how two tags are combined in each selector? The selectors identify a specific 
kind of element structure, or hierarchy, to format. The first targets p tags that are 
children of section tags, and the second targets p tags that are children of div 
tags. It’s acommon practice to combine multiple tags within a selector to tightly 
control how the styling is applied and to limit unintended inheritance. 


In recent years, a set of special characters, or wildcards, has been developed 

to hone this technique to a fine edge. For example, use a plus (+) sign like this 
section+p to target only the first paragraph that appears after a <section> tag. 
Use the tilde (~) like this h3~u1 to target unordered lists that are preceded by an 
<h3> tag. Check out www.w3schools.com/cssref/css_selectors.asp to see the full set 
of selectors and wildcards and how to use them. But be careful using them. Many 
were added only in the last few years and still have limited support. 


Specificity theory 

Conflicts between two or more rules are the bane of most web designers’ existence 
and can waste hours of time in troubleshooting CSS formatting errors. In the past, 
designers would have to spend hours manually scanning style sheets and rules one 
by one, trying to track down the source of styling errors. 


Specificity describes how browsers determine what formatting to apply when two 
or more rules conflict. Some refer to this as weight—giving certain rules higher 
priority, or more weight, based on order (cascade), proximity, inheritance, and 
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descendant relationships. One way to make it easier to see a selector’s weight is by 


giving numeric values to each component in the name. 


For example, each HTML tag gets 1 point, each class gets 10 points, each id gets 
100 points, and inline style attributes get 1000 points. By adding up the compo- 
nent values within each selector, its specificity can be calculated and compared to 
another, and the higher specific weight wins. 


Calculating specificity 


Can you do the math? Look at the following list of selectors and see how they add 
up. Look through the list of rules appearing in the sample files in this lesson. Can 
you determine the weight of each of those selectors and figure out which rule is 
more specific on sight? 


ro (Anni WakexeNetep)) SE $e 16) am (0) ar (O) a> (0) = © points 
hl de de WO) ch 0). eek ee = 1 point 
Cie Ga JR Oe a2 40) 2 © 42 = 2 points 
.class af gh (Oh SP 1@) Ap Alle) ae -(8) = 10 points 
.class hl de ee) te O) Ge Ne) ae al = 11 points 
a:hover “{ 15 ©) so © ah AO) se ai = 11 points 
#id { } © + 100 + 0 + 0° = 100 points 
#id.class { } © + 100 + 10 + © = 110 points 
Fidaclassenie sj. Ol OO Ostet DOnntcs 
style="_"" { } 1000) + 0 + 0 + 0 = 1000 poants 


As you have learned in this lesson, CSS rules often don’t work alone. They may 
style more than one HTML element at a time and may overlap or inherit styling 
from one another. Each of the theories described so far has a role to play in how 
CSS styling is applied through your webpage and across your site. When the style 
sheet is loaded, the browser will use the following hierarchy—with number 4 being 
the most powerful—to determine how the styles are applied, especially when rules 
conflict: 


1. Cascade 

2. Inheritance 

3. Descendant structure 

4. Specificity 

Of course, knowing this hierarchy doesn’t help much when you are faced with a 
CSS conflict on a page with dozens or perhaps hundreds of rules and multiple 


style sheets. Luckily, Dreamweaver has two powerful tools that can help you in this 
endeavor. The first one we'll look at is named Code Navigator. 


Code Navigator 


Code Navigator is a tool within Dreamweaver that allows you to instantly inspect 
an HTML element and assess its CSS-based formatting. When activated, it displays 
all the embedded and externally linked CSS rules that have the same role in format- 
ting a selected element, and it lists them in the order of their cascade application 
and specificity. Code Navigator works in all Dreamweaver-based document views. 


1 Open css-basics-finished.html from the lesson04 folder. 


Since you were using Split view with the previous webpage, it should still be 
selected when the new file opens. One window shows Code view, and the other 
shows Design view. 


2 Select Live view in the Document toolbar. 


@ Dreamweaver File dit View Insert Tools Find Site Window Help SR GH ab ~~ 3 F 4+ C2 &) 100%.a | si 
£7 eer ereaiooneese ennai avireean nner oieerotavsnalnonrse slbenrinenetiesnouimnaiosemmermmtensrtamen gels oeeeeane roeenrasnaiary romanenaromecen omestatanmre Caren oo nme 
\@0@ Code Split Design 
| X* ¢ss~basics-finished.htmi 

v Desigh i 
Q, “Source Code” linked.css PE eS ¥ 


56 ¥ <div class="container"> 
57 ¥ <header> 
58  <h1>Kascading Style Sheet Basics</h1> 


= 59  </header> 
Paermmelimen Chale Qh 6 ene conctinn cinccutaidnhact ts 


HNUCUNOREOU MONONA RE 


Depending on the size of your computer display, you may want to split the 
screen horizontally to see the entire page width at once. 


3 Select View > Split > Split Horizontally. 


@ Dreamweaver File Edit Insert Tools Find Site Window Help ZR GAOL © 3% F 4 | 0) 100x@ w@ s 
Code 
f dd Spl ive 
ntiatid Sot en 
*% e¢s$~basics-finished.htm! View Mode > Code-Design 
2 7 Code-Code Y 
Switch Views Split Vertically. és 00 8 ys ooo ast 
| +. am Live Code v¥ Split Horizontally 
Inspect Xen ¥ Live Viely on Top 
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lain Live View Options » ing Style Sheet Basics 
| aa 
| t Related Files > 
§ Related Files Options > 
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} 1g Full Screen ASF Dima mama 2 mal 


56 ¥ <div class="container’> 


57 ¥ <header> 
<hi>{ascading Style Sheet Basics</h1> 
| 59 </header> 
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body div container header hi @ HTML ~ 1101x189 ~ INS 58:5 (sb 


The screen shot shows the Live view window on top. 
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4 In Split view, observe the CSS code and the structure of the HTML content. 
Then, note the appearance of the text in the Live view window. 


The page contains headings, paragraphs, and lists in various HTML5S structural 
elements, such as article, section, and aside, styled by CSS rules appearing 
in the <head> section of the code. 


5 In Live view, insert the cursor into the heading “A CSS Primer.’ 
Press Ctrl+Alt+N/Cmd+Opt+N. 


View Insert Tools Find Site Window Help SROAAL —©— & F = GD &) 100% TH Sat 6:07P) 


Code Split Live wv 


Files CC 
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hi> hi 
Sheets were actually invente scontent hi 
rent had already been popul cmd+opt+click to'show [Disable al widicator| 
aaa ch Samet bose Ener ent oe 2 Bales 
A small window appears, displaying a list of eight CSS rules that apply to this 
heading. 
Tip: Code Naviga- This is how you access Code Navigator in Live view. You can also right-click any 
tor may be disabled element and select Code Navigator from the context menu. If Code Navigator 
by default. To have it te not dicabled heel eK Roald f : 
display automatically, , a Wheel icon should appear a moment after you click an ele- 
deselect the Disable ment. Click the icon to bring up Code Navigator. If not, select Code Navigator 
option in the Code Navi- from the context menu. 
gator window when it's 
visible. If you position the pointer over each rule in turn, Dreamweaver displays any 


properties formatted by the rule and their values. The rule with the highest 
specificity (most powerful) is at the bottom of the list. 


A US9)S= : me 
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Unfortunately, Code Navigator doesn’t show styling applied via inline styles, so 
you'll have to check for these types of properties separately and calculate the 
effect of inline styles in your head. Otherwise, the sequence of rules in the list 
indicates both their cascade order and their specificity. 


When rules conflict, rules farther down in the list override rules that are higher 
up. Remember that elements may inherit styling from one or more rules and 

be influenced by default styling, and all can play a role in the final presentation. 
Unfortunately, Code Navigator doesn’t show what, if any, default styling charac- 
teristics may still be in effect. You have to figure that out for yourself. 


In this case, the .content h1 rule appears at the bottom of the Code Navigator 
window, indicating that its specifications are the most powerful ones styling this 
element. But many factors can influence which of the rules may win. Sometimes 
the specificity of two rules is identical; then, it’s simply the order (cascade) in 
which rules are declared in the style sheet that determines which one is actually 
applied. 


As described earlier, changing the order of rules can often affect how the rules 
work. There’s a simple exercise you can perform to determine whether a rule is 
winning because of cascade or specificity. 


6 Inthe Code view window, locate the . content h1 tule (around line 13) and 
click the line number. 


Clicking the line number selects all the code on that line. 
7 Press Ctrl+X/Cmd+X to cut the line. 


8 Insert the cursor at the beginning of the style sheet (line 8). Press Ctrl+V/ 
Cmd-+V to paste the line at the top of style sheet. 


9 Click in the Live view window to refresh the display, if necessary. 


The styling did not change. 


10 Click the text of the heading “A CSS Primer” to select it and activate Code 
Navigator, as you did in step 5. 


¢ The Box Model 
e Cascade Theory 
e Inheritance Theory 


Primer a 


<> css-basics-finished.htm! 
Cascading Style § Source Code (turns off Live Code) 


z a . body 
7 ¥ <style type="text/css"> container 
8 .content h1 { color: purple; font-size: 300%; } fi ida 


9 ¥ body { font-family: Arial; color: gray; font-size; 

10 background-image: url(file:///NewRoad/Mai 
background-color:#acd8b6; } 

12 p,h1,h2,h3,h4,h5,hé6, li { margin: 10px Opx; } 

13. header { naddina:30nx: border-bottom:2nx sc 


body div .container = article ~—.content 


article, footer, header, section 
,sidebar1, article, .sidebar2 
p,.hi, h2, h3,.h4, n5, h6, ti 
hi 

content h1 


omnes Cmd+Opt+-click to show 
Properties —— 
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Although the rule was moved to the top of the style sheet—the weakest 
position—the order of the rules in Code Navigator did not change. In this case, 
cascade was not responsible for the power of the rule. The . content h1 selec- 
tor has a specificity higher than either the body or h1 selectors. In this instance, 
it would win no matter where it was placed in the code. But you can change its 
specificity by simply modifying the selector. 


11 Select and delete the ~centent class notation from the .content h1 selector. 


The rule now formats all h1 elements. 


® Note: Don't forget to delete the leading period indicating the class name. 


12 Click in the Live view window to refresh the display, if necessary. 


+ The Box Mode! 
* Cascade Theory 
+ Inheritance Theory 


?°¥ <style type="text/css"> 


8 ¥ .content hi { color: purple; font-size: 300%; } 
9 ¥ body { font-family: Arial; color: gray; font-size: 100%; 


© Note: Code Naviga- 
tor doesn't display 
inline CSS rules. Since 
most CSS styling is not 
applied this way, it’s not 
much of a limitation, 
but you should still be 
aware of this blind spot 
as you work with Code 
Navigator. 


* The Box Model 
* Cascade Theory 
* Inheritance Theory 


A CSS Primer 


Cascading Style Sheets were actually invented a 


A CSS Primer 


Cascading Style Sheets were actually inventec 
7% <style type="text/css"> 

& hl {color: purple; font-size: 300%; } 

9 ¥ body { font-family: Arial; color: gray; font-size: 100%; 


Did you notice how the styling changed? The “A CSS Primer” heading reverted 
to the color teal, and the other h1 headings scaled to 300 percent. Do you know 
why this happened? 


13 Click the heading “A CSS Primer” to select it and activate Code Navigator. 


Because you removed the class notation from its selector, it now has equal value 
to the other h1 rule, but since it is the first one declared, it loses precedence by 
virtue of its cascade position. 


14 Using Code Navigator, examine and compare the rules applied to the headings 


“A CSS Primer” and “Browser Specific Prefixes.” 


Code Navigator shows the same rules applied to both. 


= hig 
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Source Code (turns off Live Code) 
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,container Source Code (turns off Live Code) 

article ; 

; body 

article, footer, header, section 

idebart, article, .sidebar2 iene. 

sidebar e,. « 

: in ARES. SICEDA, article, footer, header, section 
»Sidebar2 
sSidebart, article, .sidebar2 


ht 
p, font-family: Tahoma; 
h v color: teal; 


+click to show 


atts gen ee einen: 


Wy 
ful Cmd+Opt+click to show 
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ht 


font-family: Tahoma; 


color: teal; 


Because the . content class was removed from the selector, the rule no longer 
targets only hi headings in the <article class="content"> element; it’s 
now styling all h1 elements on the page. 


15 Choose Edit > Undo to restore the . content class to the hi selector. 
Refresh the Live view display. 


All the headings return to their previous styling. 


16 Insert the pointer in the heading “Browser Specific Prefixes” and activate Code 
Navigator. 


The heading is no longer styled by the . content h1 rule. 


Is it starting to make more sense? Don't worry, it will—over time. Until that time, 
just remember that the rule appearing last in Code Navigator has the most influ- 
ence on any particular element. 


CSS Designer 


Code Navigator was introduced a while ago and has been an invaluable aid for 
troubleshooting CSS formatting. Yet a newer tool in Dreamweaver’s CSS arsenal is 
much more than a good troubleshooting tool. CSS Designer not only displays all 
the rules that pertain to any selected element but also’ allows you to create and edit 
CSS rules at the same time. 


When you use Code Navigator, it shows you the relative importance of each rule, 
but you still have to access and assess the effect of all the rules to determine the 
final effect. Since some elements can be affected by a dozen or more rules, this can 
be a daunting task for even a veteran web coder. CSS Designer eliminates this pres- 
sure altogether by computing the final CSS display for you. And best of all, unlike 
Code Navigator, CSS Designer can even compute the effects of inline styles too. 


1 Ifnecessary, open css-basics-finished.html in Split view. 


2 If you do not see the panel, choose Window > CSS Designer to display 
the panel. 
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The CSS Designer panel features four panes: Sources, @Media, Selectors, and 
Properties. Feel free to adjust the heights and widths of the panes as needed. 
The panel is also responsive—it will take advantage of any extra screen space by 


splitting into two columns if you increase the panel’s width. 


3 If you do not see two columns in the CSS Designer, drag the left edge of the 
panel to the left to increase its width. 


Standard ~ aS Standard ~- 


Files CC Libraries 


Insert CSS Designer 


Files CC Libraries insert CSS Designer 


Vf All Current Alt Current 
) ao 8st 3900 - 
a, a, Sources ti<style> + Sources : <style> + Properties 
ics L +  @Media: GLOBAL linked,ess E] &% Show Set 
+ Selectors ae (2) text 
© Filter C&S Rules *? 4 @Media; GLOBAL Pion » (W pute i 
<——————= ners GLOBAL font-size 300% 1 
* ‘ody i 
Browser Specit | 
P p, hi, h2, b3, h4, HS, hé, i eens bE felivor | 
As we! henior A Filter CSS | | 
& content hi ~ 
+ Properties body 
cs Bi show Set p, hi, h2, h3, h4, h5, h6, li 
header 


The CSS Designer will split into two columns, displaying the Sources, @Media, 
and Selectors panes on the left and the Properties pane on the right. Each of the 
panels specializes in one aspect of the styling applied to the page—namelly, style 
sheets, media queries, rules, and properties. 


By selecting the items listed in each panel, CSS Designer enables you to inspect 
and even edit the existing styling. This functionality is helpful when trying to 
identify a pertinent rule or troubleshoot a styling issue, but some pages may 
have hundreds or thousands of rules styling them. 


Trying to pinpoint one rule or property on such a page could be a daunting 
task. Fortunately, CSS Designer provides features that are designed just for 
this situation. 


4 Ifnecessary, deselect the Show Set checkbox in the CSS Designer. 


til ¥ 
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Show Set may be disabled by default when Dreamweaver is installed, and if you 
are a beginner with CSS, you may want to make sure it is disabled until you 
become more comfortable with the language. When Show Set is deselected, 
CSS Designer displays a list of the major properties available in CSS, such as 
width, height, margins, padding, borders, background, and so on. It is not all the 
possible options, but certainly the most common. If a property you want is not 
visible in the pane, you can enter it manually. 


Dreamweaver integrates the entire interface into the task of creating and styling 
your webpage. It’s important to understand how this integration works. The first 
step is selecting the element you want to inspect or format. 


Select the heading “A CSS Primer” in Live view. 


ni gy 


CSS Primer 


Cascading Style Sitects were actually invented a long time ago when 


Browser Specific Prefixes 


As we have to deal with the introduction 


entation of HTMLS, we also 
ith the introduction of 

nee . . . ~ . : rere) 2 EO acre tne Stato Cheat: ba ws 
HTML was in it infancy. But it not well understood and other version 3 of Cascading Style Sheets. The 


methods of formattine web content had alreadv been popularized and 


new version offers many improvements 


The element display appears around the heading in the Live view window. This 
simple action tells Dreamweaver you want to workrwith this specific element. 


You could try to find the rules formatting the heading by going through the 
list of rules in the Selectors pane, but that could literally take hours. There’s a 
better way. 


CSS Designer has two basic modes: All and Current. When All mode is 
engaged, the panel allows you to review and edit all existing CSS rules as well as 
create new rules. In Current mode, the panel allows you to identify and edit the 
rules and styling already applied to a selected element. 


»® Tip: Sometimes 
when you first try to 
select an element in 

a document, Dream- 
weaver may highlight 
the wrong element first. 
If so, click an element 

in a different part of 
the page and then try 
again. 


© Note: When an 
element is selected it 
may show an orange 

or blue border. This 
affects the CSS Designer 
displays of selectors and 
properties. 


© Note: When in All 
mode, CSS Designer 
displays the rules in 
the order in which they 
appear in the style 
sheet. In Current mode, 
the rules appear in 


6 If necessary, click the Current button in the CSS Designer panel. order by specificity. 
» » 
Files CC Libraries Insert CSS Designer Files CC Libraries insert CSS Designer Be 
~All | Current All Current 
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When Current mode is active, the panel displays only the CSS rules that are 
affecting the selected heading. In CSS Designer, the most powerful rules appear 
at the top of the Selectors window, the opposite of Code Navigator. 


7 Click the rule .content h1 in the Selectors panel. 
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margin 


When Show Set is deselected, the Properties pane shows a seemingly endless 
list of properties. This is helpful when you are first styling the element, but it 
can be confusing as well as inefficient when inspecting or troubleshooting exist- 
ing styles. For one thing, it makes it difficult to differentiate the properties that 
are assigned from those that aren't. Luckily, CSS Designer allows you to limit 
the display to only the properties currently applied to the selected element. 


8 Click the Show Set option in the CSS Designer panel menu to enable it. 


% ¢ss~basics~finished.html* >) 
seneiiaeee files CC Libraries Insert CSS Designer = 
Source Code = linked.css b e . 
KO 200 159 200 at 3% 330 AO AD 900 valent 
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CSS Primer . oe 


¥ oth ett LE @Media : GLOBAL axe 
0 

ony Cascading Style Sheets were actually invented a long oe ete # 00% 
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When Show Set is enabled, the Properties panel shows only the properties that 
have been set in that rule. In this instance, only the color and font size are actu- 
ally styled by the rule. 


9 Select each rule that appears in the Selectors window and observe the proper- 
ties of each. 


Some rules may set the same properties, whereas others will set different 
properties. To weed out the conflicts and see the expected result of all the rules 
combined, Dreamweaver provides a COMPUTED option. 
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The COMPUTED option analyzes all the CSS r 


ules affecting the element and 


generates a list of properties that should be displayed by browsers or HTML 
readers. By displaying a list of pertinent CSS rules and then computing how the 
CSS should render, CSS Designer does Code Navigator one step better. But it 


doesn’t stop there. 


Although Code Navigator allows you to select a rule and then edit it in Code 
view, CSS Designer lets you edit the CSS properties right inside the panel itself. 
Best of all, CSS Designer can even compute and edit inline styles. 


10 Select COMPUTED in the Selectors window. 
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The Properties pane displays only the styles actually formatting the selected 
element. By using these various features you have eliminated hours of manual 
effort of inspecting and comparing rules and properties. 


But the functionality still doesn’t end there. CSS Designer also allows you to edit 


the properties. 
11 


/ 9, hi, ha, h3, h4, b5, h6, fi 
“sidebort, article, sidebar2 


Artinla fanbase bandas eactinn 


> Tip: Click to edit the 
text-based color name. 
You can also select 
colors by using the 


In the Properties window, select the color property purple. 


Enter red in the field, and press Enter/Return to complete the change. 
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You should now see the heading displayed in red in the layout. What you may 
not have noticed is that the change you made was actually entered directly in 
the CSS rule itself. 


12 In the Code view window, scroll to the embedded style sheet and examine the 
.content hi rule. 


_ ACSS Primer 


oy Cascading Style Sheets were actually invented a long time ago when 
20ry HTML was in it infancy. But it not well understood and other 
methods of formatting web content had already been popularized and 


were dom 


7 ¥ <style type="text/css"> 

8 ¥ .contenth1 { 

9¥ color: red; 

10 font-size: 300%; 
12 ¥ body { font-family: Arial; color: gray; font-size: 100%; 


image not found 
12 a 


hackoaroaiind-imana: 


See’ 


head 


Q H1 


As you can see, the color was changed within the code and added to the 
proper rule. 


13 Close all files and do not save any changes. 


In upcoming exercises, you'll get the chance to experience all aspects of CSS 
Designer as you learn more about cascading style sheets. 


Multiples, classes, and ids, oh my! 


By taking advantage of the cascade, inheritance, descendant, and specificity theo- 
ries, you can target formatting to almost any element anywhere on a webpage. But 
CSS offers a few more ways to optimize and customize the formatting and increase 
your productivity even further. 


Applying formatting to multiple elements 


To speed things up, CSS allows you to apply formatting to multiple elements at 


once by listing each in the selector, separated by commas. For example, the format- 
ting in these rules: 


hl { font-family:Verdana; color:gray; } 
h2 { font-family:Verdana; color:gray; } 
h3 { font-family:Verdana; color:gray; } 


can also be expressed like this: 


hi, h2, h3 { font-family:Verdana; color:grays; } 


Using CSS shorthand 


Although Dreamweaver will write most of the CSS rules and properties for you, 

at times you will want, or need, to write your own. All properties can be written 
out fully, but many can also be written using a shorthand method. Shorthand does 
more than make the job of the web designer easier; it reduces the total amount of 
code that has to be downloaded and processed. For example, when all properties of 
margins or padding are identical, such as: 

margin-top: 10px; 

margin-right:10px; 

margin-bottom: 10px; 

margin-left: 10px; 


the rule can be shortened to margin: 10px3 


When the top and bottom and left and right margins or padding are identical, 
like this: 

margin-top: 0px; 

margin-right:10px; 

margin-bottom: 0px; 

margin-Left:10px; 

it can be shortened to margin: Opx 10px3 

But even when all four properties are different, like this: 
margin-top: 20px; 

margin-right:15px; 

margin-bottom: 10px; 

margin-left: 5px; 

they can still be shortened to margin: 20px 15px 10px 5px; 


In these three examples, you can see clearly how much code can be saved using 
shorthand. There are far too many references and shorthand techniques to cover 
here. Check out tinyurl.com/shorten-CSS to get a full description. 


Throughout the book, I'll use common shorthand expressions wherever possible; 
see if you can identify them as we go. 


Creating class attributes 


So far, you've learned that you can create CSS rules that format specific HTML ele- 
ments and ones that can target specific HTML element structures or relationships. 
In some instances, you may want to apply unique formatting to an element that is 
already formatted by one or more existing rules. To accomplish this, CSS allows 
you to make your own custom attributes named class and id. 


Class attributes may be applied to any number of elements on a page, whereas id 
attributes can appear only once per page. If you are a print designer, think of classes 


® Note: Margin and 
padding are specified 


clockwise, starting 


at the top of the box 


model. 
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as being similar to a combination of Adobe InDesign’s paragraph, character, table, 


and object styles all rolled into one. 


Class and id names can be a single word, an abbreviation, any combination of let- 
ters and numbers, or almost anything, but they may not contain spaces. In HTML 

4, ids could not start with a number. There doesn't seem to be any similar restric- 
tion in HTMLS. For backward compatibility, you should ey avoid starting 
class and id names with numbers. 


Although there’s no strict rule or guideline on how to create them, classes should 
be more general in nature, and ids should be more specific. Everyone seems to 
have an opinion, but at the moment there is no absolutely right or wrong answer. 
However, most agree that they should be descriptive, such as "co-address" or 
"author-bio" as opposed to "left-column" or "big-text". This will especially 
help improve your site analytics. The more sense Google and other search engines 
can make of your site’s structure and organization, the higher your site will rank in 
the search results. 


To declare a CSS class selector, insert a period before the name within the style 
sheet, like this: 


-content 
.Sidebarl 


Then, apply the CSS class to an entire HTML element as an attribute, like this: 
<p class=""intro">Type intro text here.</p> 
Or to individual characters or words using the <span> tag, like this: 


<p>Here is <span class="copyright">some text formatted 
differently</span>.</p> 


Creating id attributes 


HTML designates id as a unique attribute. Therefore, any id should be assigned 

to no more than one element per page. In the past, many web designers used id 
attributes to style or identify specific components within the page, such as the 
header, the footer, or specific articles. With the advent of new HTML5 elements— 
header, footer, aside, article, and so on—the use of id and class attributes for 
this purpose became less necessary. But ids can still be used to identify specific text 
elements, images, and tables to assist you in building powerful hypertext naviga- 
tion within your page and site. You will learn more about using ids this way in 
Lesson 10, “Working with Navigation.” 


To declare an id attribute in a CSS style sheet, insert a number sign, or hash mark, 
before the name, like this: 


#cascade 
#box_model 


Here’s how you apply the CSS id to an entire HTML element as an attribute: 


<div id="cascade">Content goes here.</div> 
<section id="box_model">Content goes here.</section> 


Or to a portion of an element: 


<p>Here is <span id="copyright">some text</span> formatted 
differently.</p> 


CSS3 features and effects 


CSS3 has more than two dozen new features. Many have been implemented in all 
modern browsers and can be used today; others are still experimental and are sup- 
ported less fully. Among the new features, you will find 


e Rounded corners and border effects 
e Box and text shadows 

e Transparency and translucency 

e Gradient fills 

e Multicolumn text elements 


You can implement all these features and more via Dreamweaver today. The 
program will even assist you in building vendor-specific markup when necessary. 
To give you a quick tour of some of the coolest features and effects brewing, I’ve 
provided a sample of CSS3 styling in a separate file. 


1 Open css3-demo.html from the lesson04 folder. 
Display the file in Split view and observe the CSS and HTML code. 


Some of the new effects can’t be previewed directly in Design view. You'll need 
to use Live view or an actual browser to get the full effect. 


2 If necessary, activate Live view to preview all the CSS3 effects in the Live view 


window. 


Rounded Corners 
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© Note: When writing 
new CSS3 properties 
that still require vendor 
prefixes today, place 
standard properties 
last. That way, when the 
subject browser finally 
supports the standard 
specifications, their cas- 
cade position will allow 
them to supersede the 
other settings. 
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The file contains a hodgepodge of features and effects that may surprise and even 
delight you—but don't get too excited. Although many of these features are already 
supported in Dreamweaver and will work fine in modern browsers, there’s still a 
lot of older hardware and software out there that can turn your dream site into a 
nightmare. And there’s at least one additional twist. 


Even now, some of the new CSS3 features have not been fully standardized, and 
certain browsers may not recognize the default markup generated by Dreamweaver. 
In these instances, you may have to include specific vendor properties to make 
them work properly, such as ms, moz, and webkit. 


As you examine the new features demonstrated in the code of the demo file, can 
you think of ways of using some of them in your own pages? 


CSS3 overview and support 


The internet doesn’t stand still for long. Technologies and standards are evolving 
and changing constantly. The members of the W3C have been working diligently 
to adapt the web to the latest realities, such as powerful mobile devices, large 
flat-panel displays, and HD images and video—all of which seem to get better and 
cheaper every day. This is the urgency that currently drives the development of 
HTMLS5 and CSS3. 


Many of these new standards have not been officially defined yet, and browser 
vendors are implementing them in varying ways. But don’t worry. This version of 
Dreamweaver, as always, has been updated to take advantage of the latest changes. 
This includes ample support for the current mix of HTML5 elements and CSS3 
properties. As new features and capabilities are developed, you can count on 
Adobe to add them to the program as quickly as possible using Creative Cloud. 


As you work through the lessons that follow, you will be introduced to and actually 
implement many of these new and exciting techniques in your own sample pages. 
Additional CSS support 


CSS formatting and application is so complex and powerful that this short lesson 
can't cover all aspects of the subject. For a full examination of CSS, check out the 
following books: 


° CSS3: The Missing Manual (4th Edition), David Sawyer McFarland (O'Reilly 
Media, 2015) ISBN: 978-1-491-91801-2 


° CSS Secrets: Better Solutions to Everyday Web Design Problems, Lea Verou 
(O’Reilly Media, 2015) ISBN: 978-1-449-37263-7 

° HIMLS & CSS3 for the Real World (2nd Edition), Alexis Goldstein, Louis 
Lazaris, and Estelle Weyl (SitePoint Pty. Ltd., 2015) ISBN: 978-0-987-46748-5 


* Stylin’ with CSS: A Designer's Guide (3rd Edition), Charles Wyke-Smith 
(New Riders Press, 2012) ISBN: 978-0-321-85847-4 


Review questions 


Should you use HTML-based formatting? 
What does CSS impose on each HTML element? 


True or false? If you do nothing, HTML elements will feature no formatting or 
structure. 


What four “theories” affect the application of CSS formatting? 


True or false? All CSS3 features are experimental, and you shouldn't use them at all. 


Review answers 


1 


No. HTML-based formatting was deprecated in 1997, when HTML 4 was adopted. 
Industry best practices recommend using CSS-based formatting instead. 


CSS imposes an imaginary box on each element. This box, and its content, can then be 
styled with borders, background colors and images, margins, padding, and other types 
of formatting. 


_ False. Even if you do nothing, many HTML elements feature default formatting. 


The four theories that affect CSS formatting are cascade, inheritance, descendant, and 
specificity. 
False. Many CSS3 features are already supported by modern browsers and can be used 
right now. 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 


133 


134 


WEB DESIGN BASICS 


Lesson overview 


In this lesson, you'll learn the following: 
e ‘The basics of webpage design 


e How to create page thumbnails and wireframes 


This lesson will take about 45 minutes to complete. To get the lesson files 
used in this chapter, download them from the webpage for this book at 
www.adobepress.com/DreamweaverC1B2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started section 
at the beginning of this book. 
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shop, or just a vivid imagination, Dreamweaver can 


quickly turn your design concepts into complete, 
standards-based CSS layouts. 


135 


© Note: Download the 
lesson files and create 

a new site for Lesson 5 
as described in “Getting 
Started.” 


Developing a new website 


Before you begin any web design project for yourself or for a client, you need to 


answer three important questions: 
e What is the purpose of the website? 
e Who is the audience? 


¢ How do they get here? 


What is the purpose of the website? 


Will the website sell or support a product or service? Is your site for entertainment 
or games? Will you provide information or news? Will you need a shopping cart or 
database? Do you need to accept credit card payments or electronic transfers? 


Knowing the purpose of the website tells you what type of content you'll be develop- 
ing and working with and what types of technologies you'll need to incorporate. 


Who is the audience? 


Is the audience adults, children, seniors, professionals, hobbyists, men, women, 
everyone? Knowing who your audience will be is vital to the overall design and func- 
tionality of your site. A site intended for children probably needs more animation, 
interactivity, and bright, engaging colors. Adults will want serious content and in- 
depth analysis. Seniors may need larger type and other accessibility enhancements. 


A good first step is to check out the competition. Is there an existing website 
performing the same service or selling the same product? Are they successful? 
You don’t have to mimic others just because they’re doing the same thing. Look 
at Google and Yahoo—they perform the same basic service, but their site designs 
couldn't be more different from one another. 


How do they get here? 


This sounds like an odd question when speaking of the internet. But just as with a 
brick-and-mortar business, your online customers can come to you in a variety of 
ways. For example, are they accessing your site on a desktop computer, laptop, tab- 
let, or smartphone? Are they using high-speed internet, wireless, or dial-up service? 
What browser are they most likely to use, and what is the size and resolution of the 
display? 


These answers will tell you a lot about what kind of experience your customers 

will expect. Dial-up and smartphone users may not want to see a lot of graphics or 
video, whereas users with large flat-panel displays and high-speed connections may 
demand as much bang and sizzle as you can send at them. 
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So where do you get this information? Some of it you'll have to get through pains- 
taking research and demographic analysis. Some you'll get from educated guesses 
based on your own tastes and understanding of your market. But a lot of it is 
actually available on the internet itself. W3Schools, for one, keeps track of tons of 
statistics regarding internet access and usage, all updated regularly: 


e http://w3schools.com/browsers/default.asp provides information about browser 
statistics. 


° http://w3schools.com/browsers/browsers_os.asp gives the breakdown on oper- 
ating systems. In 2011, W3Schools started to track the usage of mobile devices 
on the internet. 


e http://w3schools.com/browsers/browsers_display.asp lets you find out the latest 
information on the resolution, or size, of screens using the internet. 


If you are redesigning an existing site, your web-hosting service itself may provide 
valuable statistics on historical traffic patterns and even on the visitors themselves. 
If you host your own site, you can incorporate third-party tools, such as Google 
Analytics or Adobe Analytics, into your code to do the tracking for you for free or 
for a small fee. 


As of the summer of 2019, Windows desktop computers still dominate the internet 
(74 percent), with most browser users favoring Googlé Chrome (81 percent), fol- 
lowed by Firefox (9.2 percent), and with various versions of Edge/Internet Explorer 
(3.3 percent) a distant third. The vast majority of desktop browsers (98 percent) are 
set to a resolution higher than 1280 pixels by 800 pixels. 


These statistics would be great news for most web designers and developers if it 
weren't for the dominance of tablets and smartphones on the internet today. But 
designing a website that can look good and work effectively on both flat-panel desk- 
top displays and smartphones is a tall order. 


May 1, 2019 - Sep 28, 2019 
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Responsive web design ert 


Each day, more people are using smartphones and other mobile devices to access the internet. Some 
people may use them to access the internet more frequently than they use desktop computers. This 
presents several nagging challenges to web designers. For one thing, smartphone screens are a fraction 
of the size of even the smallest flat-panel display. How do you cram a two- or three-column page design 
into a meager 3- to 4-inch screen? ; 


Until the last five years or so, web design usually required that you target an optimum size (height and 
width in pixels) for a webpage and then build the entire site on these specifications. Today, that scenario 
is becoming a rare occurrence. Now, you are presented with the decision to build a site that can either 
scale to any size display (responsive) or morph to support a few target display types for desktop and 
mobile users (adaptive). 


Your own decision will be based in part on the content you want to provide and on the capabilities of 

the devices accessing your pages. Building an attractive website that supports video, audio, and other 
dynamic content is hard enough without throwing in a panoply of different display sizes and device capa- 
bilities. The term responsive web design was coined, in a book of the same name (2011), by a Boston-based 
web developer named Ethan Marcotte. In the book, he describes the notion of designing pages that can 
adapt to multiple screen dimensions automatically. Along with more standard techniques, you will learn 
many techniques for responsive web design and implement them in your site and asset design later in 
this book. 


Many of the concepts of print design are not applicable to the web, because you are not in control of the 
user's experience. For example, print designers know in advance the page size for which they are design- 
ing. The printed page and content doesn’t change when you rotate it from portrait to landscape. On the 
other hand, a page carefully designed for a typical flat panel is basically useless on a smartphone. 


@ Safari File Edit View History Bookmarks Develop Window Help 
See © 


Red 
ie) 
« 
») 
» 
A 


Hi Chart Locator URL redirect edit Stry Armazing Ribs Made Hats & Caps Other Entrea...A 


Blocks | Amazinghios com Bontsirad eCommerce PB 


LONDON PARIS 


Quis ipsum sus- Lorem ipsum dolor sit 
pendisse ultrices grav- amet, consectetur adipi- 
ida. Risus commodo scing elit, sed do eius- : : 
viverra mod tempor incididunt trices gravida. Risus 
maecenas sed do eius- ut labore et dolore commodo viverra 
mod incididunt ut magna aliqua. accumsan Maecenas accumsan 
labore et dolore lacus vel facilisis. lacus vel facilisis, 


©) 2020 Favorite City Tour 


138 LESSON 5 Web Design Basics 


Scenario 


For the purposes of this book, you'll be working to develop a website for Favorite 
City Tour, a fictitious travel and tour organization. This website will offer a variety of 
tours and services and require a broad range of webpage types, including dynamic 
pages using technologies such as jQuery, which is a form of JavaScript. 


Your customers come from a demographic that includes ages from young adult 
to senior citizens with disposable income and higher educational levels. They are 
people who are looking for a new experience and a different, edgier take on travel 
and tourism. 


Your marketing research indicates that most of your customers still use desktop 
computers or laptops, connecting via high-speed internet services. You can expect 
to get 20 to 30 percent of your visitors exclusively via smartphone and other mobile 
devices, and many of the rest will be using mobile from time to time, especially 
when traveling. 


To simplify the process of learning Dreamweaver, we'll focus on creating a site based 
on one of the program’s pre-built starter layouts, where you will learn how to adapt 
your design theme to the existing framework. 


Working with thumbnails and wireframes 


After you have nailed down the answers to the three questions about your website 
purpose, customer demographic, and access model, the next step is to determine 
how many pages you'll need, what they will do, and what they will look like. 


Creating thumbnails 


Many web designers start by drawing thumbnails with pencil and paper. Think 
of thumbnails as a graphical shopping list of the pages you'll need to create for 
the website. Thumbnails can help you work out the basic navigation structure for 
the site. Draw lines between the thumbnails showing how the site navigation will 


Thumbnails list the pages 
that need to be built and 

Home how they are connected to 
each other. 
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Identifying the essential 
components for each 
page helps you create 

a page design and 
structure that will meet 
your needs. 


Most sites are divided into levels. Typically, the first level starts with the home page 
and includes all the pages in your main navigation menu—the ones a visitor can 
reach directly from the home page. The second level includes pages you can reach 
only through specific actions or from specific locations—say, from a shopping cart 


or product detail page. 


Creating a page design 

Once youve figured out what your site needs in terms of pages, products, and 
services, you can then turn to what those pages will look like. Make a list of compo- 
nents you want or need on each page, such as headers and footers, navigation, and 
areas for the main content and the sidebars (if any). Put aside any items that won't 
be needed on every page. What other factors do you need to consider? If mobile 
devices are going to be an important consideration of your design identity, will any 
of the components be required (as opposed to optional) for these devices? Although 
many components can simply be resized for mobile screens, some will have to be 
completely redesigned or reimagined. 


|. Horizontal navigation (for internal reference, i-e., Home, 
Roout Us, Contact US) 

A Header (includes banner and logo) 

3. Footer (copyright int ) 


UL Man Content (one column with Chance of two or nore ) 


Do you have a company logo, business identity, graphic imagery, or color scheme 
you want to match or complement? Do you have existing or proposed publications, 
brochures, or advertising campaigns you want to emulate? It helps to gather them 
all in one place so you can see everything all at once on a desk or conference table. 
If youre lucky, a theme will rise organically from this collection. In some cases, the 
print identity and publications will evolve from the web design. 


Desktop or mobile 


Once you've created your checklist of the components that you'll need on each page, 
sketch out several rough layouts that work for these components. Depending on 
your target visitor demographics, you may decide to focus on a design that’s opti- 
mized for desktop computers or one that works best on tablets and smartphones. 


Most designers settle on one basic page design that is a compromise between flex- 
ibility and sizzle. Some site designs may naturally lean toward using more than one 
basic layout. But resist the urge to design each page separately. Minimizing the 
number of page designs may sound like a major limitation, but it’s key to producing 
a professional-looking site that’s easy to manage. It’s the reason why some profes- 
sionals, such as doctors and airline pilots, wear uniforms. Using a consistent page 
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design, or template, conveys a sense of professionalism and confidence to your visi- 
tor. While you're figuring out what your pages will look like, you'll have to address 
the size and placement of the basic components. Where you put a component can 
drastically affect its impact and usefulness. 


In print, designers know that the upper-left corner of a layout is considered one 

of the “power positions,’ a place where you want to locate important aspects of a 
design, such as a logo or title. This is because in western culture we read from left to 
right, top to bottom. The second power position is the lower-right corner, because 
this is the last thing your eyes will see when you're finished reading. 


Unfortunately, in web design this theory doesn’t hold up for one simple reason: You 
can never be certain how the user is seeing your design. Are they on a 20-inch flat 
panel or a 3-inch-wide smartphone? 


In most instances, the only thing you can be certain of is that the user can see the 
upper-left corner of any page. Do you want to waste this position by slapping the 
company logo here? Or make the site more useful by slipping in a navigational 
menu? This is one of the key predicaments of the web designer. Do you go for design 
sizzle, workable utility, or something in between? 


Creating wireframes 


After you pick the winning design, wireframing is a fast way to work out the 
structure of each page in the site. A wireframe is like a thumbnail, but bigger, that 
sketches out each page and fills in more details about the components, such as 
actual link names and main headings, but with minimal design or styling. This step 
helps to anticipate problems before you smack into them when working in code. 
What might take you hours or days to produce digitally can be sketched out in 
minutes by hand. 
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Once the basic concepts are worked out, many designers take an extra step and 
create a full-size mockup or “proof of concept” using a program such as Photoshop 
or even Adobe Illustrator. It’s a handy thing to do because you'll find that some 
clients just aren’t comfortable giving approvals based only on pencil sketches. The 
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The wireframe for the 
final design should 
identify all components 
and include specific 
information about 
content, color, and 
dimensions. 


® Note: You should be 
able to open the sample 
file with any version of 
Photoshop CC or higher. 
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the panels and menu 
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different. 
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uses fonts from Typekit, 
Adobe's online font 
service. To view the 
final design properly 

in Photoshop, you will 
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in your subscription to 
Creative Cloud. 


advantage here is that all these programs allow you to export the results to full-size 
images (JPEG, GIF, or PNG) that can be viewed in a browser as if they were finished 
webpages. Such mockups are as good as seeing the real thing but may take only a 
fraction of the time to produce. 
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To demonstrate how a graphics program could be used to build such a mockup, 
I created a sample webpage layout using Photoshop and saved it into the Lesson 5 
resources folder. Let’s take a look. 


1 Launch Photoshop CC or higher. 


2 Open favoritecity-desktop-mockup.psd from the lesson05/resources folder. 
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The Photoshop file contains a mockup of the Favorite City Tour site design geared ® Note: If you do not 
for desktop computers using flat-panel displays. It is composed of various vector- have access to Photo- 


based design components as well as image assets stored in separate layers. Note the 
use of colors and gradients in the design. Feel free to experiment with the layers and name. 
various components to see how they were created. 


In addition to creating graphical mockups, Photoshop has tricks geared specifically 
for web designers. 


Designing for mobile devices 


Depending on the needs and demographics of your desired audience, you will also 
have to contend with visitors accessing your site via smartphones and tablets. These 
devices can range in size from just a few hundred pixels to nearly the size of a desk- 
top display. For many sites, mobile users may be your main target audience. If this is 
the case with your site, you may want to consider using a mobile-first strategy. 


Mobile-first focuses on design requirements for phones and tablets over those of 
desktop users. By making the design and environment optimal for these visitors, you 
create a welcoming experience, which should therefore translate to increased traffic 
and revenue. 


Since phones and many tablets provide much less realestate, you have to rethink 
common design practices. For example, many designers try to emphasize graphics 
and photos, maximizing their size and composition on large landscape flat-panel 
displays. But this strategy can backfire on small vertically oriented phones, where a 
bold and dramatic landscape may be displayed only a few inches wide. 


In turn, headlines and text that can be seen and read all at once on a large display 
may require the visitor to scroll several screens to read on a phone. Writing effec- 
tively for mobile users presents a daunting challenge at the least. In some cases, 
companies actually provide customized content for different types of visitors. By 
using various dynamic schemes based on programming languages such as PHP, ASP, 
and JavaScript, the site can determine what type of device is viewing it and then 
serve content specifically geared for that display size. 


The third way 


The third option is to design the site to compromise between desktop and mobile 
visitors. You'll find that many visitors will alternate between desktop and mobile 
devices, sometimes on the same day. They will use their computers or laptops at 
home and work and then jump on their phones and tablets when they are on the 


road or running around town. 


This is the easiest and least expensive strategy. It doesn’t require any special pro- 
gramming or development, and it’s the one | will use throughout the book. To see 
how this can work, I’ve created mockups of the site design for mobile users too. 
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Open favoritecity-tablet-mockup.psd from the lesson05 folder. 
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This file contains the mockup for the site design on tablets. 


Open favoritecity-phone-mockup.psd. 
Note: If you do not have access to Photoshop, you can open HTML files by the same name. 
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This file contains the mockup for the site design on smartphone. 
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All three mockups should be open in Photoshop or Dreamweaver. You can alter- 
nate between them by clicking the tabs at the top of the document window. Switch 
between the layouts and compare and contrast them. Notice kaw each design fea- 
tures the same content but resized and reformatted for the specific environment. 


The mockup of the Favorite City Tour site design is composed of various vector- 
based design components as well as image assets stored in separate layers. Note the 
use of colors and gradients in the design. Feel free to experiment with the layers and 
various components to see how they were created. 


In addition to creating graphical mockups, Photoshop has tricks geared specifically 
for web designers. Adobe Generator is a feature of the program that allows you to 
create image assets in real time as you work in Photoshop. To learn more about 
Adobe Generator, check out https://tinyurl.com/adobe-generate. 


To learn how to use the Adobe Generator see this tutorial: https://tinyurl.com/ 
asset-generator. 


In the next lesson you will learn how to modify a built-in Dreamweaver template to 
match the site design mockup. 
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Review questions 


1 What three questions should you ask before starting any web design project? 
What is the purpose of using thumbnails and wireframes? 
Why is it important to create a design that takes into account smartphones and tablets? 


What is responsive design, and why should Dreamweaver users be aware of it? 


uu & WwW N 


Why would you use Photoshop and Illustrator, or other programs, to create design 
mockups for a website? 
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Review answers 


1 What is the purpose of the website? Who is the audience? How did they get here? These 
questions, and their answers, are essential in helping you develop the design, content, 
and strategy of your site. 


2 Thumbnails and wireframes are quick techniques for roughing out the design and 
structure of your site without having to waste lots of time coding sample pages. 


3 Mobile device users are one of the fastest-growing demographics on the web. Many 
visitors will use a mobile device to access your website on a regular basis or exclusively. 
Webpages designed for desktop computers often display poorly on mobile devices, 
making the websites difficult or impossible to use for these mobile visitors. 


4 Responsive design is a method for making the most effective use of a webpage, and its 
content, by designing it to adapt to various types of displays and devices automatically. 


5 Using Photoshop and Illustrator you can produce page designs and mockups much 
faster than when designing in code with Dreamweaver. Designs can even be exported as 
web-compatible graphics that can be viewed in a browser to get client approval. 
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CREATING A PAGE LAYOUT 


Lesson overview 

In this lesson, you'll learn how to work faster, make updating easier, 
and be more productive. You'll learn how to do the following: 

e Evaluate basic page structure from design mockups. 

e Create a layout based on a predefined starter layout. 

e Upload a Photoshop mockup as a Creative Cloud asset. 

e Extract styling, text, and image assets from a Photoshop mockup. 


e Apply extracted styles, text, and image assets to a starter layout in 
Dreamweaver. 


This lesson will take about 2 hours and 30 minutes to complete. To get 
the lesson files used in this chapter, download them from the webpage 
for this book at www.adobepress.com/DreamweaverC1B2020. For more 
information, see “Accessing the lesson files and Web Edition” in the Get- 
ting Started section at the beginning of this book. 
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Dreamweaver provides powerful tools with which to 
apply styling, text, and image assets created in other 
Adobe applications, such as Photoshop. 


149 


® Note: Download the 
lesson files and create 

a new site for Lesson 6 
as described in “Getting 
Started.” 


Evaluating page design options 


In the previous lesson, you went through the process of identifying the pages, com- 
ponents, and structures you would need for a specific website. The selected design 
balances those needs against a variety of other factors, such as the types of visitors 
that may come to the site and their means of connecting to it. In this lesson, you 
will learn how to implement those structures and components in a'basic layout. 


Since there are almost unlimited ways to build a design, we'll concentrate on 
building a simple structure that uses the minimum number of HTML5 semantic 
elements. This will produce a page design that is easy to implement and maintain. 
Let’s start by taking a look at the mockup introduced in Lesson 5, “Web Design 
Basics.’ 


1 In Dreamweaver, open favoritecity-mockup.html from the lesson06 folder. 


This HTML file contains an image depicting the final mockup of the Favorite 
City site design that you saw in Lesson 5. The design can be broken down into 
basic components: header, footer, navigation, and main content elements. 


2 Close favoritecity-mockup.html. 


Once you have the skills to build your own page layouts, you can use Dreamweaver 
to execute any design from scratch. Until that moment, one option is to fall back on 
the handy webpage layouts provided by Dreamweaver itself. 


Working with predefined layouts 


Dreamweaver has always tried to offer the latest tools and workflows to all web 
designers regardless of their skill level. For example, over the years, the program 
has provided a selection of predefined templates, various page components, and 
code snippets to make the task of building and populating webpages fast and easy. 


Often, the first step of building a website was to see whether one of its predefined 
layouts matched your needs or whether your needs could be adapted to one of the 
available designs. 


Dreamweaver (2020 release) continues this tradition by providing sample CSS 
layouts and frameworks that you can adapt to many popular types of projects. You 
can access these samples from the File menu. 


1 Choose File > New. 


The New Document dialog appears. Dreamweaver allows you to build a wide 
spectrum of web-compatible documents besides those built using HTML, CSS, 
and JavaScript. The New Document dialog displays many of these document 
types, including PHP, XML, and SVG. Predefined layouts, templates, and frame- 
works can also be accessed from this dialog. Let’s check out the options. 
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2 Inthe New Document dialog, choose Starter Templates > Basic Layouts. 


The Starter Templates window of the New Document dialog displays three 
choices: Multi Column, Simple Grid, and Single Page. 


At the time of this writing, Dreamweaver (2020 release) offers three basic 
layouts, six Bootstrap templates, four email templates, and three responsive 
starter layouts. The exact number and features of these layouts may change over 
time through automatic updates via Creative Cloud. The changes to this list may 


occur without notice or fanfare, so keep your eyes peeled for new options in 
this dialog. 


All the featured layouts are responsive designs built using HTML5-compatible 
structures and will help you gain valuable experience with this evolving stan- 
dard. Unless you need to support older browsers (such as IE5 and IE6), there’s 
little to worry about when using these newer designs. 


3 If necessary, select Basic - Multi Column. 
Observe the preview image in the dialog. 


New Document 


Sample Folder: Sample Page: 


New Document Go okey 


© Bootstrap Templates 


Basic - Simple grid 
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A preview image shows the design of a multi-column webpage. 


4 Select Basic — Simple Grid. 


New Document 
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The preview image changes to depict the new grid-based design. 
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5 Select each of the categories and design options in turn. 
Observe each preview image in the dialog. 


Each template offers a design appropriate for specific applications. After 
reviewing all the sample layouts, only the Bootstrap eCommerce template is 
close to the design of the Favorite City mockup. 


6 Choose Bootstrap Templates > Bootstrap eCommerce. 


7 Click Create. 


New Document 
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The file contains a one-column layout with navigation, body content, and footer 
components. Before we proceed, it’s a good idea to save the file. 


8 Select File > Save. 


The first time you save a new file the Save and Save As commands are identical. 
Once a file is saved, use the Save As command to save a file under a new name 
or in a different folder. 
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When the file is saved, Dreamweaver automatically adds various resources—image 
placeholders, CSS, and JavaScript libraries—to the site folder to support the Boot- 
strap functionality of the template. You can see these new assets in the Files panel. 


If you examine the new webpage, you can see that it has some similarities to the 
site mockup viewed earlier. In the following exercises, you will learn how to adapt 
this layout to make it match that design and to create the site template in Lesson 7, 
“Working with Templates.” 


Styling a predefined layout 


Once you get the skills under your belt, it will be a simple thing to build a webpage 
layout from scratch. For now, the Dreamweaver starter layouts provide a great 
place to jumpstart the process of building your site template. 


1 Ifnecessary, open mylayout.html from the lesson06 folder. Make the document 
window as large as the computer display will allow (at least 1200 pixels). 


This webpage is based on a fully responsive Bootstrap starter template. The 
styling you see will change based on the width and orientation of the docu- 
ment window in Dreamweaver. To ensure you are obtaining the same results as 
shown in this lesson, make sure the document window is at least 1200 pixels in 
width unless otherwise directed within the exercise. 


The first step is to make this generic layout take on some of the personality of 
the proposed design. Normally, you would have to do that the old-fashioned 
way, by editing the CSS by hand. But since the layout was mocked up in Adobe 
Photoshop, Dreamweaver has a built-in feature called Extract that can use the 
site mockup to create some of the desired styling for you. 


Extract was added to Dreamweaver a few versions ago. It is a feature hosted by 
Creative Cloud and accessed through a panel in the program. 


® Note: Before accessing the Extract panel, you must have the Creative Cloud desktop app 
running and be logged in to your account. 


2 Select Window > Extract. 


The Extract panel appears. The panel connects to your Creative Cloud account 
and will display any Photoshop files in your assets. To use the site mockup, you 
first have to upload it to the Creative Cloud server. 
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3 Click the option Upload PSD. 
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A file dialog appears. 
4 Select favoritecity-mockup.psd in the lesson06/resources folder and click 


Open. 
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The file is copied to your Creative Cloud Files folder on your computer, which is 
then synced to your Creative Cloud remote storage. Once the file is uploaded, it 


should be visible in the Extract panel. 
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5 Click to load favoritecity-mockup.psd in the Extract panel. 
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The mockup loads and fills the entire panel. Extract enables you to access and 


derive styling information, image assets, and even text from the mockup. 


Styling elements using the Extract panel 


The Extract panel can obtain image assets and styl- 
ing data from the Photoshop file. In this exercise, 
we're interested only in the styling data. Let’s start at 
the top and work down the page. First, we'll grab the 
background color. 


1 In the Extract panel, click the yellow background of 
the page. 


When you click in the preview image, a pop-up win- 
dow appears. The pop-up window allows you to select 
the data you want to obtain from the mockup. 


The buttons at the top of the pop-up indicate what 
data is available from the selected component, such as 
CSS, text, and image assets. Notice that the Copy CSS 
and Extract Asset buttons are selectable, indicating 
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indicating that no text content is available to be downloaded. 


The window displays the CSS styling as a list with checkboxes. When you select 
a checkbox, those specifications will be copied to program memory. The CSS 
styling that is displayed includes properties for width, height, and background 
color. You can select all the settings or only the ones you want to use. 
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2 Ifnecessary, deselect width and height. 
Select background-color. 


3 Click the Copy CSS button. 
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Once you've copied the settings, you can then apply them directly to the layout 
in Dreamweaver. The easiest way to use this data is via the CSS Designer. 


4 Ifnecessary, select Window > CSS Designer to open or display the panel, and 
enable the Show Set option. Click the Current button. 


First, we want to apply the specifications to the top navigation menu in the 
current layout. You can target the menu by selecting the appropriate rule in the 
Selectors pane or by selecting the actual element in Live view. 


The current layout is fully responsive, so the styles are applied based on the 
width and sometimes the orientation of the document window. To obtain the 
correct styling you have to make sure the document window is showing the full 
desktop version of the design at a minimum of 1200 pixels. 


5 In Live view, click to select the top navigation menu. 
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The Element Display will appear targeting the <nav> element. There are 

four classes assigned to the element: .navbar, .navbar-expand-lg, 
-navbar-dark, and .bg-dark. In some cases, when you select an element 
in the document window, Dreamweaver does not select the desired one first. 
To ensure that the proper element is targeted, you should use the tag selector 
interface. 


6 Select nav in the tag selector interface. 


poems nae 


| 3 FreeShipping | {| @ i Fri 


When an element is properly selected, CSS Designer will display a list of CSS 
rules applied to it when you click the Current button. The list in this case 
should include rules targeting the classes .navbar, .navbar-expand-lg, 
.navbar-dark, and .bg-dark. Occasionally, the first time you select an ele- 
ment the display may not be accurate. If the list does not include rules you 
believe target the element, click the element tag selector again. 
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When tracking down the current styling of an element, be aware that it can 

be applied directly to the <nav> element, applied to any one of the individual 
classes assigned to it, or divvied up between two or more rules. Part of your job 
in this instance is to figure out where the styling is coming from and then to 
either replace or override it. 
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© Note: Some 
Windows users have 
reported that the 
Bootstrap style sheet is 
not marked Read Only. 
Either way, | recom- 
mend that you leave the 
Bootstrap CSS as is and 
follow the directions 

as written. 


As you learned in Lesson 4, “CSS Basics,’ when the Current button is selected, 
CSS Designer displays any styling set on the element selected in the layout. The 
Selectors pane in the CSS Designer displays the rules applied to the selected 
navigation menu. The CSS rules listed include an inline style: .bg-dark, 


.navbar-expand-lg, and .navbar. 


One of these rules is applying the background color to the nav element. By 
clicking the selectors, you can inspect the properties assigned to the rule. In 
CSS Designer, the rule at the top of the list is the most powerful. If there are any 
conflicts between it and any other rule, the properties in the first rule will over- 
ride the others. 


7 Select .bg-dark and examine the Properties pane. 
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The rule applies a background color of #343a40. If the rule were contained in 

a normal style sheet, you could use the background color from the mockup to 
replace the existing color. But the style sheet applied to this page was created by 
the Bootstrap framework and is marked as Read Only in CSS Designer. You can 
see that the rules and properties are grayed out in CSS Designer. To override the 
existing styling, you will have to create a new, separate style sheet. All the styles 
you create from this point on should be added to this new style sheet. 


8 In the Sources pane of CSS Designer click the Add CSS Source icon *. 


A dropdown menu appears that allows you to create a new CSS file, attach an 
existing CSS file, or define a style sheet embedded within the page code. 
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Reading, no writing 


The Bootstrap style sheet is formatted as a read-only file to prevent you from mak- 
ing accidental changes to the framework’s complex styling. From time to time as 


you work in your pages, a warning message may appear at the top of the screen 
indicating that the file is read-only and prompting you to make it writable. 


A ‘bootstrap-4.3.1.css‘ is read only. Make writable 


You can dismiss the message by clicking the Close icon © on the right side. It also 
provides an option to make the file writable. You're advised to resist the temptation 


to make the Bootstrap style sheet editable. 


9 Choose Create A New CSS File from the dropdown menu. 


The Create A New CSS File dialog appears. 


10 Type favorite-styles.css in the Create A New CSS File dialog. 


Click OK to create the style sheet reference. 
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® Note: It is essential to note here that the CSS file has not been created yet and will not be 
until you create a CSS rule and save the file. If Dreamweaver crashes before that happens, you 


will have to re-create the file in a separate operation. 


When you click OK, a reference to the new style sheet is added to the CSS 
Designer Sources pane. The CSS file has not actually been created yet, but a link 
has been added to the <head> section of the page, and the file will be created 


automatically as soon as you create your first custom rule and save the file. 
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Another thing you may not have noticed in the process is that Dreamweaver 
automatically switched to the All button in CSS Designer and selected the new 
style sheet. This is important because when the Current button is selected you 


cannot create new selectors or properties. 


11 If necessary, click favorite-styles.css in the Sources panel. 
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The @Media and Selectors panes are both empty. This means there are no CSS 
rules or media queries defined in this file. You have a blank slate on which you 
can make any design additions or modifications. Since you will not change the 
Bootstrap CSS directly, this style sheet will be the means you use to make its 
structure and content bend to your wishes. 


The rule applying the current background color to the nav element was 
.bg-dark. To override that styling, you need to create an identical rule in the 
new Style sheet. 


12 In the Selectors pane click the Add Selector icon *. 
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A field appears in the Selectors panel that enables you to create a new selector 
name. Dreamweaver even jumpstarts the process by generating a sample name 
for you based on the element selected in the document window. In this case, the 
selector name uses all four classes assigned to the nav element. Since the rule 
setting the background color uses only one of the classes, the new rule should 
be identical to avoid any unintended consequences. 


13 Type .bg 
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bootstrap-4.3.1.css_( Read Only ) ' 
+ @Media: GLOBAL 
GLOBAL } 
+ Selectors 
2 Fitter CSS Rule 
{ .bo4 | 
.bg-danger 
.bg-dark 
.bg-inrd va 
.bg-light 
.bg-primary 
.bg-secondary 
.bg-success 
.bg-transparent lode: Lists rules for entire document 
DOM -bg-warning = 
+ | _sbg-white ivbar-expand-Ig .navbar-dark bg=dark 


Since the automatic selector name was highlighted it is completely replaced by 
the new text. Don't forget to start with the initial period (.) that defines a class 
name in CSS. A hinting menu appears listing any classes used within the HTML 
or selectors defined within the CSS that match the entered text. You should see 
.bg-dark in the list. 


14 Select .bg-dark in the hinting menu and press Enter/Return to complete the 
selector name. 


The .bg-dark selector now appears in the favorite-styles.css style sheet. Note 
that there are no properties defined yet. Once the selector is created, you can 
apply the styling extracted from the mockup. 


15 Move the cursor over and right-click the .bg-dark selector. 


A context menu appears, providing options to interact with the rule by editing, 
copying, or pasting the CSS specifications. In this case, you want to paste the 
styles derived from the Extract panel. 
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+ — Sources 


ALL SOURCES 


bootstrap-4.3. Less ( Read Only ) 


favorite-styles.css 


+ @Media : GLOBAL 


GLOBAL 


+ — Selectors 
-bg-dark 
Go to Code 


Paste Styles 
Duplicate 


Tip: If the nav tag 
selector is not visible, 
you may have to first 
select the navbar or one 
of its components in the 
document window. 


@® Note: If you see 

an orange border, it 
means the content is 
selected instead of the 
element. Click the Ele- 
ment Display to obtain 
a blue border before 
editing CSS. 


16 Select Paste Styles from the context menu. 


+ Properties 


All Mode: Lists rules for entire document 


Show Set | 


+ — Sources 


ALL SOURCES 


bootstrap-4.3.1.css ( Read Only } 


favorite-styles.css 


*- @Media : GLOBAL 


GLOBAL 


+ — Selectors 
PD Fitter 
bg-dark 


+ Properties i 
fl Show Set | 


GZ Background 
background- 


Ee - 2 secatse 8 @ 


U backgr 
(J mere Bitiniilea atte 


Alf Mode: Lists rules for entire document 


The background-color properties of the mockup now appear in the new CSS rule. 
But there’s a problem. The navbar is still showing a dark background. Conflicts 
between rules in other style sheets are common on the web. Knowing how to 


troubleshoot styling problems is an important skill in a web designer. Fortunately, 


Dreamweaver has some great troubleshooting tools. 


Troubleshooting CSS conflicts 


Although this may be the first CSS conflict you have encountered, it certainly won't 


be the last. There are a variety of tools in Dreamweaver that make sussing out these 


errors a relatively simple task. 


1 Select the Current button in CSS Designer, if necessary. 


2 Click the nav tag selector. 


The Selectors pane displays a list of rules formatting some aspect of the navbar 


or its parent structure. The first selector in the pane is .bg-dark. 


3 Click .bg-dark in the Selectors pane and examine its properties. 


Files CC libraries insert 


7 Sources 
| 


| bootstrap-4.3.1.c8s ( Read Only ) 


favorite-styles.css 


+ @Media 
GLOBAL 
I min-width : 992px ) 


+ Selectors 
COMPUTED 


sbg-dark 
.bg-dark 
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Current 


- Properties 

Ze &2 Show Set | 
ZB Backgroun 

teckground— 

coe : |. #eeddes 

[+] More 


‘The Properties pane displays the rule .bg-dark first in the list with the 
background-color property you just added. This usually indicates that the 
rule has a higher specificity and should override any other styling. But in this 
case, the property has a black line through it. Dreamweaver is showing you that 
the rule is disabled for some reason. Fortunately, the built-in troubleshooting 


doesn’t stop there. 


Move the cursor over the background- 
color property in CSS Designer. 


A tool tip appears reporting that the back- 
ground color is being disabled because the 
specification in the Bootstrap template is 
marked ! important. This CSS attribute 
is used only in emergencies to override 
conflicting styling that can’t be fixed any 
other way. 


There are two ways to fix the issue. You 
can remove the ! important attribute in 
the Bootstrap rule or add ! important to 
the new property. Since the Bootstrap style 
sheet is formatted as Read Only, you will 
have to use the latter solution. 


Right-click the rule .bg-dark. 
Select Go To Code in the context menu. 


The document window splits horizontally 
showing the Code view window at the bot- 
tom focused on the new favorite-styles.css 
style sheet and the .bg-dark rule. 


Insert the cursor after the color value 
#eedd66 but before the colon (;). 


Press the spacebar to insert a space. 
ivpem 


© Note: The space is not required for the attribute to 


function. It just makes the code easier to read and edit. 


@charset "UTF-8"; 
¥ .bg-dark { 
background-color: #eedd66| 
} 


Files CC Libraries Insert. CSS Designer 


fh 


All Current 
+ Sources + Properties 
bootstrap-4.3.1.cs5 ( Read Only ) (=) Show Set 
favorite-styles.css 


+ 


BA Bac 


‘ound 


Selectors 


COMPUTED 


i x 


Files <i Libraries insert CSS Designer 
All Current 
+ — Sources oh Properties 
ALL SOURCES fs] Show Set 


bootstrap-4.3.1.css_( Read Only } 


Background 


background- aoe 
: color : (2) #eeddes 
ae @Media 
GLOBAL Bloor 
+ — Selectors 


£P Ff 


ADOBE 


dark _ vias eee 


Go toa Code 
Copy All Styles 
Copy Styles > 


Duplicate 
All Mode: Lists rules for entire document 


@charset "UTF-8"; 
v .bg-dark { 
background-color: #eedd66 limportant; 
} 
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@ Note: When new 
files are added to the 
site, the Files panel 
may not display them 
instantly. 


> Tip: The Extract 
panel may obscure part 
of the page you need 
to work on. Feel free to 
reposition or dock the 
panel at any time. 


Dreamweaver should autocomplete the ! important attribute. As soon as the 
attribute appears in the style sheet, the navbar reformats to match the styling 
shown in the mockup. 

As you may have noticed, the |! important attribute has no representation 
anywhere in CSS Designer. Keep this in mind when you troubleshoot other CSS 


issues in the future. 


8 Choose File > Save All. 


By using Save All you have saved the changes to the webpage and created the 
favorite-styles.css file in the site folder. The Extract panel also enables you to pick 


up the text content in the mockup. 


Extracting text from a Photoshop mockup 


The Extract panel enables you to pick up formatting for text as well as the text itself. 


In this exercise, you will pick up both from the mockup. 


1 


If necessary, open mylayout.html from the lesson06 folder in Live view. Make 
sure the document window is displayed at a width of 1200 pixels or wider. 


If necessary, select Window > Extract to display the Extract panel. 


The mockup should still be displayed in the panel. If not, simply select it in the 
list of assets. 


Examine the top navigation menu in the mockup. 


The navigation bar has six menu items and no other components: Home, Tours, 
Cruises, Events, Contact Us, and About Us. The navigation bar in the Bootstrap 
layout is completely different. It has four menu items, one of which is a drop- 

down menu with additional options of its own, and a search box with a button. 


When working with a third-party template, it’s a good idea to remove items that 
you don’t need or want as soon as possible so they don't get in the way. 


The first item in the Bootstrap menu is the item Navbar. This item is a hyper- 
link, but it’s not part of the menu. Nothing like it appears in the desktop 
mockup, but there is a text element in the tablet and phone designs. The text 
element replaces the header and logo image on smaller screens. 


Select the Navbar element. 


An orange border appears around the element. This indicates that the text can 
be edited. 


Double-click the word Navbar. 


The entire word is highlighted. 
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6 Type Favorite City Tours 


Eg .navbar-brand 
Fe 
i 


The company name will appear on a phone and tablet but will be hidden for 
desktop visitors. We'll leave it visible for the time being. 


The Home menu item is formatted differently than the other items. When you 
see odd formatting like this, it’s usually because of a CSS class not assigned to 
the other items. 


7 Select the Home menu item. 


The Element Display appears focused on the a tag. Notice the orange border 
around the element. 


There’s nothing special about this element. Let’s check the <1i> element. 
To change the focus of the Element Display, you can use the mouse or the 
keyboard. 


8 Press the Esc key. 
The border color on the <a> element changes to blue. 


9 Press the up arrow key. 


400 


“prapae 


The Element Display focus changes to the 1i element. Notice that this link has 
an additional class assigned to it: . active. 


10 Position the cursor over the class .active. 
Click the Remove Class/ID icon on the .active class. 


10 259 300 350 A00 450 50K 10 250 300 350 400 450 561 


ee 


j , 
Tour | Home | nk Dropdown * 


Tour” “Home” Cink” “TIT + ete}! “hey te 88a 
Bee 


Wig .nav-item 


; 
active N i i) .nav-item 


Once the .active class is removed, the Home menu item is formatted the same 
as the Link item. 


© Note: Pressing the 
up or down arrows 
when the blue border is 
visible will change the 
Element Display, focus- 
ing on elements as they 
appear in the document 
object model (DOM). 
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® Tip: The text extrac- 
tion feature is really 
intended for longer pas- 
sages of text. Feel free 
to type the menu items 
by hand if you prefer. 


11 


12 


The next item in the menu mockup is Tours. The Extract panel enables you to 


pull text content from the mockup as well as CSS. 


In the Extract panel, select the second item: Tours. 
Make sure you select the text and not the button. 


The pop-up window appears. Notice that all three buttons at the top of the 
Extract panel window are active. This indicates that you can extract styling, text, 


and image assets from this selection. 


Click the Copy Text button. 


5a 550 To 350 zi) ABD 500 550 B00 


~ Extract aa 


@ | favoritecity-mockup.psd 


@®) Source Sans Pro 


a 24px 
'n width : 46px d 24px 36px 43px 


height : 14px 


/2 TOURS 24px 


font-family: 'Source Sa 


n A color : #006699 \ a 

ae: font-size : 20px : 

eh font-weight : 400 : 

be Js Line-height : 7.2px NEW YORK | 

Ne sere gptein ins St Ltabore et dolore 
arnet. consectetur adipi- magna aliqua. Qui: 


13 In mylayout.html double-click Link in Live view. 


The text is highlighted and an orange box appears around the text, indicating 
you are in text-editing mode. 


14 Right-click the selected text. 


The context menu appears, giving you options for cutting, copying, and pasting 
the text. 


15 Select Paste from the context menu. 


350 $00 ASD Se Cony 


ity Tour Home 


~ Extract 


 @ | favoritecity-mockup,) 


ity Tour. Hom 


S Extract 


a ‘ @  favoritecity-mockup.psd 
Delete Be : OSS : . 
D 


Duplicate Bl 


age Hidden Elements 


Kan 


| Copy css 


Select al Select All ~ 9A | @) Select all 
width: 46e Select Parent Tag at " 


width : 46px 


Tours replaces the text Link. 
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The next item in the Bootstrap menu is a dropdown menu. The mockup does not 
show such an item, so there’s no reason to keep it. 


Deleting components and 
attributes from a template 


If you see unneeded components in a template, feel free to delete them. When 
deleting components, it’s important that you delete the entire element and not 
leave any part of its HTML code behind. 


1 Select the Dropdown menu item in the document window. 


The Element Display will appear on the Dropdown item. In most cases, the 
display will focus on the <a> element of the item. 


Most navigation menus are constructed of unordered lists, using three main 
HTML elements: ul, li, and a. A dropdown menu is usually built using another 
unordered list as a child of one of the list items. 


To get rid of the dropdown menu, you can either delete that child list or delete 
the parent containing it. The simplest method is to delete the parent. Whenever 
you want to delete elements in a layout, always use the tag selectors to ensure 
you get all the markup. 


2 Select the 1i tag selector for the Dropdown item. 


f-auto FO% .nav-item.dropdown a ena supportedContent.collapse.navoar-collapse ui .navbar-nay.mr-auto 4 -nav-item.dropdown 3 


hats = 


— 


~ Class (av-link dro... ~) oe) 


The Element Display should now focus on the 17 element. Note the orange @ Note: When the 
border around the element. This color indicates that the element content can be orange border appears, 
: ; : 3 ne eE ; ; F : the display of CSS 
edited directly. oe penaver highlights a major change in the functionality of pesignetinay show 
Dreamweaver’s Live view. styling applied to the 
content instead of ele- 


In previous versions of Dreamweaver, Live view allowed you to delete elements PR 


immediately, but you had to double-click them to enter edit mode. In this ver- 
sion of Dreamweaver, you can edit elements immediately, but you have to select 
them a second time to delete them. 
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3 Click the Element Display focused on the 14 element for the Dropdown item. 


355 AOD 450 509 556 60D 


Note how the element border changes to blue. This means the element is 


selected instead of the content. 


4 Press Delete. 


100 150 200 230 300 350 400 450 500 550 600 650 


Favorite City Tour Home Tour 


The Dropdown menu item and its child markup are deleted entirely from the 


page. Once the selected element is gone, the Element Display automatically 
highlights the Disabled menu item. A blue border appears around the element. 


Note that this menu item is a lighter color than the other items. This is due to 
a special .disabled class applied to it. If you delete the class, the element’s 
formatting will conform to the rest of the menu items. 


The .disabled class is applied to the <a> element. But that element is not vis- 
ible in Live view or in the tag selectors. There are several ways to select a child 
element in Live view when it doesn’t appear in the interface. If you see the blue 
border in Live view, you can try the DOM selection method we used earlier. 


5 Press the down arrow on the keyboard. 


300 350 400 450 1500 550 600 360 350 400 A50 500 $50 600 


The focus of the Element Display changes to target the <a> element. Now you 
can see the .disabled class in the Element Display. 
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6 Click the Remove Class/ID icon ™ for the .disabled class in the Element 
Display. 


360 550 


e : Disabiec 
| q 


BY cnavink— Ip disabled x0 


a] avin | 


Once the class is removed, the formatting of the Disabled menu item conforms 
to the others. 


7 Double-click the text Disabled. 
Type Cruises 


The third menu item is now compiete. Before we create any of the missing menu 
items, let’s clean up the rest of the navbar. The mockup doesn’t contain a search 
box, so you might as well get rid of it. 


8 Select the Search button. 


By examining the tag selectors you can see that the button is part of a larger 
component. It’s composed of three HTML elements: form, input, and button. 
The form element is the parent. 


9 Select the form tag selector. 


Search 


; button _btn-outline-success 


Spe mt ce 


{ 
Hl 
i 
| 


“for .form-inline.my-2.my-lg-0 button btn.btn-outline-success.my-2.my~sm-0 Q 1228x308 vv fsy 


ee, — 


© i 


The Element Display appears focused on the form element with an orange 


border. 


® Note: It’s possible that the form may be selected with a blue border. If that happens, skip 
to step 11. 
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10 Click the Element Display. 


Search 


‘o° eS EER fore KEES EEA 
2a | er es Mimvico [| 


The border changes to blue. 


11 Press Delete. 


a 
The entire Search form is deleted. 


You have deleted the search component and created three menu items; you have 
three more to go. Let’s finish the menu by creating the missing items. 


Inserting new menu items 


As you learned in the previous exercise, the horizontal menu is composed of an 
unordered list. Adding new menu items is simple in Dreamweaver. 


1 Select the third menu item, Cruises, in the document window. 


In most cases, when you select an item in a menu like this, Dreamweaver will 
focus on the <a> element and display an orange border. Note the .navlink 
class assigned to it. 


2 Press the Esc key. 


The focus of Live view changes from the content of the selection to the element 


itself. To create a new menu item, you have to duplicate the current HTML 
structure. 


3 Press the up arrow key. 


300 350 400 ~ 450 500 550 300 350 400 


pa uis 


450 5900 $50 


Cruises 


" SEE Ee 


a nav link i 
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The Element Display now focuses on the 1i element. Note the .nav-item class 
assigned to it. 


Dreamweaver provides several ways to create new menu items. 
4 Select Insert > List Item. 
The Position Assist dialog appears. 


5 Select After. 


Is _ Find Site. Window Help View Insert Tools Find Site Window Help 


image XS! 
Paragraph 


Heading > 
- Table XRT 
favorit Figure per.min,js boots fayorite~styles.css* jquery-3.3.1L.min,js popper.min,js bootstrap- 


Unordered List 
Ordered List 


_ Hyperlink * : 
Soeaoes oF 


_ Header 
Navigation 
nascar = Main 
; Aside i 


Article 


A new menu item appears with placeholder text. 


6 Select the placeholder text Content for li Goes Here‘ 
Type Events 


400 450 $50 


This menu item doesn’t look like any of the others at the moment, but that can 
be quickly rectified. The other menu items are assigned a class of .nav-item. 


7 Click the Add Class/ID icon [+] in the Element Display. 


8 Type .nav-item and press Enter/Return. 


nav-item 
cnay-Mestified 
.nav-link 
nay-pills 
-Nay-tabs 


As you type, the hinting menu will display classes that are already defined in the 
document or style sheets. Feel free to select the proper class when you see it in 
the list. 
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The new menu item still doesn’t match the formatting of the other items. That's 
because it’s missing a component. The menu item needs a hyperlink and the 
proper CSS class assigned to it. Although there’s nothing to link the item to yet, 
you can use the hash symbol (#) to create a link placeholder. 


9 Select the text Events. 


The Text Display appears. This dialog enables you to apply bolding, italics, and 


hyperlinks to a selection. 


10 Click the Add Link icon 22. 
Type # and press Enter/Return. 


388i oh 


ote CT 


| 


tJ 


The Element Display focuses on the new <a> element. To match the other links, 


you need to add the class .nav-link. 


11 Click the Add Class/ID icon in the Element Display. 


12 Type .nav-link and press Enter/Return. 


Nav-fill 
oes: Nav-item 
-Nav-justified _ 


Boat gok 
.nav-pills 


Cruises) Events} 


Once the class is applied, the new link matches the appearance of the other links. 


You can also create new menu items using the DOM panel. 


Creating new elements with the DOM panel 


The DOM panel depicts the entire HTML structure of the page, including classes 
and ids, but ignores the content. The functionality doesn’t stop there. It also enables 
you to manipulate the page structure, by editing, moving, deleting, and even creat- 


ing new elements. 


1 Ifnecessary, choose Window > DOM. 


The DOM panel focuses on the element selected in the document window. The 
menu item for the Events <a> element should be highlighted. To insert another 
item, you first have to select the <li> element. 
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2 Select the last <li> element in the panel. 


3 Click the Add Element icon *F in the DOM panel. 


4 Select Insert After. 


DOM Snippets Assets = DOM Snippets Assets : = 
~ Lul> .navbar-nav .mr-aute ¥ (a> unavbar-nav .mr-auto 
> [B nav-item > (BD snav-item 
> Ly -nav-item > LD, nav-item 
> [> navitem 


> [1D .nav-item 


Insert Before row 


SSSR SK h ainer mt-3 
| Insert Chil 
> [SVD container i tainer 
| Wrap Tag 


A new <div> element appears in the DOM panel. The item is highlighted and 
still editable. If you press Enter/Return, the new element will be created. But we 
need an <li> element instead. 


5 Type li and press Tab. 
The div is replaced by 11. The cursor moves to the attribute field. 
The DOM panel enables you to create HTML elements as well as classes and ids. 


6 Type .nav-item and press Enter/Return. 


DOM Assets Snipers DOM Assets Snippets DOM Assets Snipaets 
#oavbaSupponedContent .collapse navbar-colla ~ [div> enavbarSupportedContent collapse .navbar-colla > [GIe> snavharsuppartedContent .colapse .navoar-cafia 
> [BD -navbar-nay .mr-auto ~ [8D -navbar-nav smr-auto » [GD navbar-nay mr-~avto 
> By nav-tem > [1 rav-item > (BY .nav-item 
> [DY nav-item > [1 nav-item > [> .nav-items 
> Dnaw-item > (ly nav-item > (> raveitem 
> (By nay-item $ > (B).nav-iten > (Ly .nav-iterm 
i - si fi nav 
fs ca, 
¥ [form kform-iniine .my-2 .my-lq-0 ny-lg-o ~ [form form-inli nav-fill 
form-control .mr-sm-2 =sm-2 form: <“ynem 
fink sRav-justified 
btn btn-cutline-success .cmy-2 .my-ser Biwwnry coreresener-oumnmt success my-2 .my-sir Bution> bins tink Yo? smy-sir 
- container .mt-3 - container mt-3 ~ [2M container.mt-3 —nay-pilts 
~ [BD «ow v [EXD cow » FED row <Hay-tabs 
The new menu item with placeholder text appears in the document window. 
7 Select the placeholder text. 
Type Contact Us 
0 500 550 600 650 700 750 BOO 0 500 550. 600 650 700 750 ~~SCOSOO 


i .nav-item 


Select the text Contact Us. 


co 


The Text Display appears. 
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9 Click the Link icon @4. 
Type # and press Enter/Return. 


6 $00 550 600 650 700 750 860 ] 500 550 600 650 706 759 88 


Pyents ! 


Contact Ud 


Ei .nav-link 


The Contact Us item is fully formatted. There’s one item left to make. By far the 
easiest method for creating menu items is using copy and paste. 


Creating menu items with copy and paste 


As you can see, there are a lot of tedious steps to creating a new menu item. By 
using copy and paste, you can cut the grunge work dramatically. 


1 Select the Contact Us menu item. 


2 Select the 11 tag selector. 


$50 690 §50 700 750 800 850 900 $50 1000 


Contact Us 


iti .nav-item | 


ai .navbar-nav.mr~auto wnav-item = & — .Nav-tink : (O) HTM 


The Element Display appears focused on the 14 with an orange border around 
the element. 
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3 Press the Esc key. 


ASO ; 00 550 600 


“ELE .nav-item 


The border changes from orange to blue indicating the element is now selected. 


4 Right-click the Contact Us Element Display. ® Note: Make sure 
Choose Copy from the context menu. the cursor is over the 
Element Display label 
450 500 ese pare 650 700 750 8 when using the context 


menu. Sometimes the 
focus can change to the 
<a> element and will 
cause an error when 
you paste. 


Delete 
Duplicate . 


When an element is selected in the document window, the Paste command 
inserts the new element directly after the selection as a sibling. 


5 Right-click the Contact Us Element Display. 
Choose Paste from the context menu. 


450 500 550 600 650 700 750 g 450 B00 «BO 600 650 700 750 


U Contact Us — 
sa i 


Cut 
Nav-iter: Copy 
[7 —«~Paste 


| Paste Shecial 
j | Delete » 
| Duplicate #D 


A copy of the Contact Us menu item appears beside the original, identically 
formatted. 


6 Double-click the word Contact in the new menu item. 


7 Type About and press the Esc key. 


350 600 650 100 750 B00 ~~«BE 350 600 650 700 750 800 £ 


tact Us ContactUs : ee About Us 


B I 2 & 


a Psnav-link | 


The final menu item is complete. 


8 Choose File > Save All. 
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Now that the content of the menu is finished, you can concentrate on formatting 


the text and buttons in the menu. 


Extracting text styling 


The text appearing in the navbar is formatted in white. This color was fine when the 
navbar had a black background, but white is not as legible on top of yellow. In this 
exercise, you will learn how to use the Extract panel to pick up the text styling from 
the mockup as well as the formatting for the buttons themselves. 


Before you can apply any styling from the mockup, you need to have someplace to 
paste it. The Bootstrap style sheet is Read Only, which means you'll have to create 
the rules before you can bring over the CSS. 


1 If necessary, open mylayout.html in Live view. Make sure the document win- 
dow is at least 1200 pixels wide. 


@ Note: When select- 2 Select one of the text items in the navigation menu. 


ing the text, make sure 
that Dreamweaver 
focuses on the <a> Text styling can be applied to any of these elements or even to all five at once. 


The menu is composed of five types of HTML elements: nav, div, ul, li, and a. 


element. Often, it takes The goal is to have the styling from the mockup override the settings from the 
two or more clicks to 


get the focus on the 
correct element. 3 Click the Current button in the CSS Designer. 


Bootstrap style sheet. 


The Selectors pane displays the CSS rules that affect the selected text. The 
rule at the top of the list is the most powerful. That’s the one you usually want 
to target. 


Notice that the Sources pane shows bootstrap-4.3.1.css in bold, which means 
that all the rules formatting the selected element are stored therein. 


Although the rule at the top of the Selectors pane is the most powerful, it’s not 
necessarily the one formatting the selected element. Dynamic elements, such as 
navigation menus, by default have four separate states formatted by CSS: link, 
visited, hover, and active. You'll learn more about this in Lesson 10, “Working 
with Navigation.’ For now, you need to extract the default, or link, state of the 
menu items. 


4 Right-click the selector 


-Navbar-dark .navbar-nav .nav-Link. 
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Files CC Libraries Insert CSS Designer 


All Current 
ay Sources Properties 
bootstrap-4.3.1.css ( Read Only ) (tT) (J 
favorite-styles.css 
@Media 
GLOBAL : 
I ( min-width : 992px ) re 


§ ( min-width : 574ny » 


eng yt CUD 
a:not([href]):not({tabindex]):hover, a:not([href... 


-navbar-expand-Ig% Go to Code 


a:not((href]):not([t Copy All Styles 


-Navbar-nav .nav-lir Copy Styles ) 
av-link:hover, nai. me 


a:hover o- 
: Duplicat 


4 


The context menu appears showing several commands, most of which are 
grayed out. If the Bootstrap style sheet were not Read Only, you could use 
Duplicate to reproduce the needed selector in favorite-styles.css. Instead, we'll 
work around this limitation to achieve the same result. 


Choose Go To Code from the context menu. 


A dialog should appear notifying you that the Bootstrap style sheet is locked. It 
offers the options of making the style sheet writeable or viewing it. 


Click the View button. 


COMPUTED i 
Dreamweaver 


bootstrap-4.3.1.css is a locked file and can be viewed but not 
changed. What would you like to do with this file? 


( Make Writable__) (Cancel ar 


The document window splits horizontally, showing a Code view window at the 
bottom and focusing on the targeted rule. You may need to scroll up a bit to see 


the selector. 


® Note: Some 
Windows users report 
that the Bootstrap style 
sheet is not marked 
Read Only. If you experi- 
ence that behavior, the 
style sheet should load 
immediately. 
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7 Select and copy the selector name. 


512 ¥ .navbar-dark .navbar-nav .nav-link ’ 


color: rgba(255, 255, 255, 0.5); Quick Edit aE 
} Cut : _ 3X 
16 ¥ .navbar-dark .navbar-nav nav-lin! paste SAS “gey if 
ic) 
sishsanbanbenesbadoneds Eind in Currant Aaciiment rs 


You have copied the selector that formats the default state of the menu items. 
Now you need to re-create it in favorite-styles.css. 


8 Click the All button in CSS Designer. 


The focus of the document window is on Code view, which is looking at the 
Bootstrap style sheet. To see favorite-styles.css in CSS Designer, you'll have to 
set the focus back to Live view. 


9 Select any of the menu items in Live view. 
10 Select favorite-styles.css in the Sources pane. 


11 Click the Add Selector icon *. 


A field opens for the new selector name. A sample selector appears 
automatically. 


12 Press Ctrl+V/Cmd+V to paste over the selector. 


» »” 
Files CC Libraries insert CSS Designer a Files CC Libraries insert CSS Designer = 
All Current AM. Current 
+ — Sources + Properties + - Sources [+ Properties 
ALL SOURCES cs Show Set ALL SOURCES £3 Show Ser 
bootstrap-4.3.1.css ( Read Only ) : bootstrap-4.3,1.css ( Read Only } : 
) @ Background ‘ More 
favorite-styles.css j oe favorite-styles.css ' EJ More 
: background- + {BE secdase : 
i. ' | color 3. iy. i 
@Media 4 + @Media 
GLOBAL : EI More GLOBAL 
+ — Selectors + = Selectors 
& Filter CSS Rules 
bg-dark 
| navbar-dark snavbar-nav .nav-link zt § 


k 


The selector copied in step 7 appears in the field. 
13 Press Enter/Return to complete the selector. 

Now youre ready to bring over the text formatting from the mockup. 
14 In the Extract panel, select any of the text items in the navigation menu. 


The pop-up window appears, showing extraction options for the selection. 
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15 If necessary, deselect all specifications except font-family and color. 


x 46 
Extract 


#00 FIT | 37.17% | 


| BE wes) | © 


@®  favoritecity-mockup.psd 


Sele ; >) 
elect all oS. a wv © Source Sans Pro 
width : 60px ; 


height : 15px 


Regular Pedies@ 24px 

Bold 24px 36px 43px 
*@ font-family: 'Source Sai 
~@ color : #006699 j 
font-size : 20px 


Black 24px 


Mee font-weight : 400; » & Impact 
LONDO! 

, Ces 
Quis ipsum sus 


pendisse ultrices grav- 
ida. Risus commodo 


line-height : 7.2px NEW YORK | 
Ltabore et dolore 5 
magna aliqua. Quit: 
Ipsum suspendisse (&: 
trices gravida, Risu / 


scing elit, sed do eius- 
viverra mod tempor incididunt 
maecenas sed do elus- ut labore et dolore 
mod incididunt ut magna aliqua. accumsan 
labore et dolore lacus vel facilisis. 


commodo viverra 
maecenas accumsa 
lacus vel facilisis. &) 


16 Click the Copy CSS button. 


Once the CSS specifications are copied from the mockup, you have to identify 
the rules in the template that format the text in the menu items. This can be 
tricky because text styling can be very complex. Often, several rules may affect 
a single text element. This doesn’t mean you can’t successfully format an item; it 
just means you have to be especially vigilant when applying the new styling. 


17 Right-click and select Paste Styles on the rule created in step 13. 


% 
Files CC Libraries Insert CSS Designer = 


files CC Libraries Insert CSS Designer 
Alt Current | All Current 
| 
+ — Sources + Properties + — Sources + Properties 
ALL SOURCES Show Set ALL SOURCES @ & 
bootstrae-4.3.1.css ( Read Only ) bootstrap-4,3,1.c95 ( Read Only ) 
J) more (2) tex 
favorite-styles.css favorite-styles.css 
: : color 
+ @Media | + @Media font-family 
GLOBAL GLOBAL 
E) More 
+ — Selectors + = Selectors 
PB Filter CSS Rules Pp 
ibg-derk / bg-dark 
snavber-dark snavbar-nav nav-tink snayoer-dark nayber-nav .nay-tink 
Go to Code r 
Paste Stvies 


Duplicate 


The Properties pane displays the specifications for font-family and color. The text 
styling in the six menu items now in Dreamweaver matches the mockup. The next 
task is to format the menu buttons. 


® Note: The font used 
in the menu is Source 
Sans Pro from Adobe 
Typekit. As explained in 
Lesson 5, “Web Design 
Basics,’ you will have 

to log in, download, 
and install the font 

to use it properly in 
Dreamweaver. 


Show Set 


: BR 2008699 
1 Source Sans Pro 
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Creating a gradient background using Extract 


Although you might not be able to discern this from the tiny Extract panel preview, 
the buttons in the navbar have a gradient background. The gradient shows darker 


yellow at the top, changing to a lighter yellow at the bottom. 


As with the menu text, you have to identify the rules that create any type of back- 
ground color for the menu items. In most cases, such formatting will be applied to 


the <li> or <a> element. 


1 If necessary, open mylayout.html from the lesson06 folder in Live view. 
Make sure the document window is at least 1200 pixels wide. 


2 Select any of the items in the horizontal menu. 


Typically, the <a> element will be selected by default. Since the <a> element is 
the child of the <1i>, you can inspect all the styles applied to a menu item by 
selecting that element. 


3 Click the a tag selector. 


450 500 550 600 659 700 750 860 850 $00 


navbar-collapse ul .navbar-nav.mr-auto li 


4 Click the Current button in CSS Designer. 


5 Choose Show Set in CSS Designer, if necessary. 
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6 Click each of the rules starting at the top of the Selectors pane. 


yf 


Files CC Libraries Insert CSS Designer = i 

All Current. | 

i i 

+ Sources : Properties i 

bootstrap-4.3.1.css (ReadOnly) [fF] [=] Show Set 
favorite-styles.css : 

@Media j 

; color ; : 

GLOBAL i ' 

ff Cmin-width : 992px ) : fe i 


a:not({href]):not([tabindex]):hov... 


-Navbar-dark .navbar-nav .nav-link 


navhar-dark navhar-nav nav-link 


Current Mode: Lists rules for current selection 


As you inspect each rule, the Properties pane displays any style applied to 
the menu structure. It starts on the <a> element but will eventually show you 
styles applied to the <li> and <ul> elements too. Look for any background 
properties. 


After examining each of the rules, you will discover that no background proper- 
ties are set on any of the menu elements. You can use either the <li> or <a> 
element. Let’s apply the button styling to the <17>. 


The first step is to create a rule to which you can apply the style. Use the follow- 
ing procedure to ensure the new rule is created properly. 


7 Click the 13 tag selector. 


A50 500 550 600 650 700 750 800 8! 


eas | 
j 
t 
J 


‘Ea .nav-item 


iavbar-collapse ul  .navbar-nav.mr-auto wnav-item a .nav-link 


v) Mie +2 25 Title 


8 Click the Ail button in CSS Designer. 
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9 Inthe Sources pane, select favorite-styles.css. 
10 Click the Add Selector icon *. 


The selector field opens populated by a custom selector written by Dream- 
weaver. By default, these names are very specific. By pressing the up and down 
arrows on the keyboard, you can change the specificity. Although you want the 
selector to target the menu items, it doesn’t need to be overly long. 


® Note: Insome 11 Press the up arrow until the following selector appears: 

instances, you may have .navbar-nav.mr-auto .nav-item 

to press the down arrow 

to achieve the desired 12 Edit the selector to .navbar-nav .nav-itemand press Enter/Return. 
selector. 


files CC Libraries Insert CSS Designer 


i 


All Current 


+ - Sources Properties 
ALL SOURCES / 

bootstrap-4.3.1.css_( Read Only ) 

favorite-styles.css 


3 


+ @Media 
GLOBAL 


+ Selectors 


£ Filter CSS Rules 
-bg-dark 
-navbar-dark .navbar-nav .nav-link 


| .navbar-nav nav~-item 


All Mode: Lists rules for entire document 


The rule is now ready for the button formatting. 


13 If necessary, choose Window > Extract. 
Select favoritecity-mockup.psd. 


14 Select any of the menu buttons in the mockup. 


x 
Extract 


@  favoritecity-mockup.psd FIT (57.75% | + { 


Copy Css 


Select all 


th : 1px 
Hf ff f33 


ic otis RITE TOURS 


@ > background-image : Linea 


ELLE LLLLLE LE LDL ELLER DADE ELL LEE, 


LONDON PARIS NEW YORK 


I tahoare at dolare 
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You will bring over the background and border styling. 
15 If necessary, select width but deselect height in the pop-up window. 
16 Click the Copy CSS button. 


4 beret s 


® @®  tavoritecitymockua,psd fir (sts Un) | Sees | | ayer | 


S) 


aretea 


oo RITE TOURS 


LONDON PARIS NEW YORK 


~ Ltahaca ot dalare 


PARIS NEW YORK 


e* Tahara at dainee 


17 Right-click the rule .navbar-nav .nav-itemand choose Paste Styles from the 
context menu. 


Files CC Libraries insert CSS Designer = Files CC Libraries tsert . CSS Designer = 
All Current : All Current 
+ — Sources * Properties + + Sources + Properties 1 
ALL SOURCES f 
sow Seb ALL SOURCES fo El EJ Show Set | 
bootstrap-4.3.1.css ( Read Only ) EI bootstrap-4.3.1.css (Read Only ) 
More SESS i 
ee me é 3 Layout 
favorite-styles.css favorite-styles.css — : 
: width : 108px 
+ @Media ; GLOBAL + @Media ; GLOBAL : 
GLOBAL GLOBAL | El Border 
+ — Selectors 
= + — Selectors border > Ipx solid #ffff33 
Filter CSS Rules Filter 
mm PF O 8 8 & 
4 -bg-dark oath 
0 < a : : x 
SABES AES ENE Nevis .naybar-dark .navbar-nav .nav-link style : ae 4 
.Navbar-ney .nav-item .Navbar-nay .nav-item color + DE: ert33 
Go to Code 
Background 
Paste pes background-image | 
Duplicate 


gradient @ linear-gradient... 
url 6 


The styles copied from the mockup appear in the Properties pane. The individ- 
ual menu items display a gradient background, a distinct border, and a consis- 
tent width that appear similar to the mockup. But the buttons still need a bit of 
tweaking. 
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18 In CSS Designer, deselect the Show Set option. 


When it is deselected, the Properties pane shows a full list of CSS properties 
you can apply to an element. The rule .navbar-nav .nav-item should still be 


selected. 


The mockup shows a bit of space between the buttons, but that kind of styling 
isn’t supported by Photoshop. You'll have to create it yourself. 


19 Click the Layout category icon fc. 


Files CC Libraries Insert CSS Designer 


ih = 


: All Current 
+ = Sources i + Properties 
ALL SOURCES : ia) esa] f=] (CJ Show Set 
bootstrap-4.3.1.css_( Read Only ) : 
favorite-styles.css S| 
Soe ota sows. width : 108px 
+ @Media : GLOBAL height 
GLOBAL _ min-width 
te “~"*— min-height 
+ — Selectors 2 
max-width . 
P Filter CSS Rules : 
max-height 
.bg-dark display 
Maaten Bade <«Navbar-nav .nav-link box-sizing 
snavbar-nav .nav-item 
; margin : Set Shorthand 


\ 


20 Insert 4px in the left and right margin property. 


Files CC Libraries insert CSS Designer 


tstrap~-4.3.1js 


+ — Sources 


P ALL SOURCES. 


ree bootstrap-4.3.1.css ( Read Only ) 
| favorite-styles.css 


GLOBAL 


a 
| + @Media : GLOBAL 


“SES + — Selectors 

P Filter OSS Rules 

.og-dark 

snavbar-dark .navbar-nay .nay-link 
pavbar-nav .nav-item 


21 Click the Text category icon [T]. 
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ies 


All Current 
+ — Properties t 
BHE@BEA soe 


» Max-height 
’ display 
© box-sizing 


margin 


22 Choose text-align: center. 


” 
Files CC Libraries insert CSS Designer Si 
~min.js bootstrap=4.3.1js / 
Al Current 
+ — Sources 1 + Properties | 
; mea | 
F ALL SOURCES Ba | CO show set! 
e bootstrap-4.3.1.css { Read Only ) ‘ i 
: e : + (tex i 
- favorite-styles.css_ Peal i 
| : : | color t UA founed H 
i + @Media : GLOBAL | font-family 
I a GLOBAL _ font-style 
* font-variant 
+ — Selectors t . 
+ font-weight 
Fitter CSS Rutes é 
£ cee it : font-size 
-bg-dark © line-height 
-navbar-dark .naybar-nav .nav-link text-align = 
} a SN ee au 
| sPavbar-nav snavetem - text-decoration : 
+ text-indent 


The text aligns to the center within the buttons. 
23 Choose File > Save All. 


The navigation menu is done for now. The next component of the mockup is the 
logo image. Typically, such images are inserted in a <header> element. Since the 
Bootstrap template doesn’t have one, you'll have to add it yourself. 


Extracting image assets from a mockup 


The company logo appears below the navigation menu. You will extract the image 
from the mockup and create a new <header> element to contain it. 


1 Inthe Extract panel, select the logo image. 


x 
Extract 


“¢ 


@  favoritecity-mockup.psd FIT (57.75% | x | | | Styles | | Layers 1 @ 


oO U R Select all 
width ; 933px 
height : 166px 
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Although the logo image is selected, don’t assume Extract will export only the 
image. If the image is part of a Photoshop layer that includes the text, or other 
effects, it will export those as well. It’s a good idea to check how the image is 
constructed. Don’t worry—you don’t need Photoshop to discover the composi- 
tion of the selected element. Extract can read and display the contents of the 
layers in the Photoshop file. 


2 Click the Layers button. 


Extent wt Loasvect ca 


@ | favornecity-mocaup.grd FE 10m Fe) | f Styer | Pisses | @ 
Re mean Herder 

@ sia FAVORITE COPE TOUR 

Me ntricetn TRAVEL VOTH A DIFFERENCE 

& pias favcity-iogo 4 
ep AU ok, © 2020 Fareaeixe City Tour 


al 
a te Page bork 
eyenteee 


a thowsier cus 


% enain Consainer 


2 eS bschgrond 


soonsaseansneamsonaoncocnwaoit 


Note the selected layer in the panel. The logo is part of the Header layer, which 
includes the company name and motto. If the Header layer is selected, Extract 
will create an image that would include the text too. In some cases that would 

be desirable, but not here. If you insert text in the webpage, search engines can 
index it and perhaps improve your result ranking. 


3 Ifnecessary, select the favcity-logo layer. 


x bas 4 
Extract 


ih) 


@  favoritecity-mockup.psd FIT [100% | + | | [ Styles | i @ 


i 
ee paris 
new york } 


@ S8 Sian Header 


& sesctone FAVORITE CITY TOUR 
Select all 


width : 933px rs T O U R S | ® sess TRAVEL WITH A DIFFERENCE 
height : 166px % : 


® Maes favcity-logo 


BD vor ee © 2020 Favorite City Tour 


Page-back 
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4 Click the Extract Asset icon & in the layer. 


A pop-up window appears in the Extract panel that enables you to name the 
image, choose what type of image you want to create, and choose where you 
want it to be saved. In Lesson 9, “Working with Images,” you will learn all about 
web-compatible images and how to work with them. For this exercise, you will 
create a JPEG file. 


5 Ifnecessary, in the pop-up window Folder field select the lesson06 images 
folder. 


The Save As name field in the pop-up window should show favcity-logo. 
The name comes from the Photoshop layer. If the field shows any other name, 
make sure you don’t have the wrong layer selected. 


6 Click the JPG button. 
7 Ifmnecessary, set the Optimize option to 80. 


x cx 
Extract 


@  favoritecity-mockup.psd 


Folder 
| NeWRoad:MacProjects:Peachpit:l | & 


| PNG8Alpha 


Optimize 


Scale at x 
® | 4) Save Multiple | 
‘ vi [Sb 
® @t.aw favcity-logo L = 


@ se, ©2020 Favorite City Tour 


CLE LAL LLL DOLE 


8 Click Save. 


If you set up the images folder when defining the lesson06 site, the logo image will 
be saved to it automatically. Now you’re ready to create the <header> element. 


Creating new Bootstrap structures 


As you can see from the mockup, the header, like the navbar, stretches across the 
entire screen. The other page components don’t. Bootstrap uses a row and column 
metaphor to divide up the screen. By adding another row to the navbar, the header 
would automatically assume the same width. 


® Note: If you set 


up the default images 


folder in the advanc 
settings of the Site 

Definition dialog, th 
site image folder wil 
already be targeted. 


ed 


e 
| 


© Note: The Extract 
panel is able to create 


only PNG and JPEG 
image types. 
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Dreamweaver makes adding new rows to Bootstrap components a simple point- 


and-click process. 
1 Select any of the menu items in the navbar. 


2 Select the nav tag selector. 


x mylayout.html® 


bootstrap-4.3.1l.css favorite~styles.css” jquery-3.3,1.min.js popper.min.js E 


Favorite City Tour 
NN OE  ——— Sc coenenaDeeneRneEnCenaSaenES 


body diy container = div. —s #navbarSupportedContent.collapse.navbar-collapse ul navbar 
cena nnnnnnnnnnnannnnnnmnenvnaa AW niin ann nwmainnnannnenan Avena enreyeenrenna sen mina 4 sennntlenns 
Properties 
Na’ 
Past 


The Element Display appears focused on the nav element. 
3 Choose Window > Insert. 
The Insert panel appears. 
4 Inthe Insert panel, select Bootstrap Components from the dropdown menu. 


The Bootstrap category enables you to add a variety of components to your 
layouts. All of them are designed to support the browsers on desktops, tablets, 
and phones right out of the box. 


5 Click Grid Row With Column 
The Position Assist dialog appears. 


6 Click After. 
In the No. Of Columns To Add field, enter 1 


% mylayout.htent” 


i Source Code > bootstrap-4.3,1.css —favorite-styles.css* — jquery-3.3...minjs — popperminjs —_ bootstrap-4,3. 1 js 


} Insert row 


Before 
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7 @lick OK: 


A new div.row element appears below the navbar with placeholder text. 


Although a <div> is a perfectly acceptable element, there’s a slight semantic 
value in using the HTML5 header element. 


8 Press Ctrl+T/Cmd+T. 
The Quick Tag Editor appears. 


9 Replace div with header and press Enter/Return. 


0 50 106 450 2600 250 {300 3h © SO 450 Boo 200 a50 300 135 


‘Content goes fF siven 
glyohref —— 


ontent goes here roundea-o 
rounded-bottom > 

pee = rounded-circle 

_. rounded-left 

/ rounded-lg 

_ rounded-pill 

| rounded-right 

 rounded-sm 

_rounded-top 


The div. row is now header. row. 


10 Select the placeholder text. 
Type FAVORITE CITY TOUR 


The text has no HTML element applied to it. Semantically, the company name 
should be formatted as a heading. Best practices say that pages should have only 
one h1 heading and it should be reserved for the main page heading. So for the 
company name you'll use an h2 instead. The easiest way to format text is using 
the Property inspector. 
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© Note: If the Property 
inspector appears as a 
floating panel, feel free 
to dock it to the bot- 
tom of the document 
window. 


11 Choose Window > Properties if necessary. 
In the Properties panel Format field, select Heading 2. 


150 200 250 360 


reneeacnerarnaa rattan emerson en stom trom ere rem ane a a 


body header wow  Giv ~ .col-xl-~12 body header TOW diy .col-xl-12 h2 
Properties Properties 
Format “ None Clas Format { Heading 2 v Clas 
i Dr. 4 Ss Ss Lin 
Ue Paragraph a None * v 
aah oe Sees Heading { | Si poll SR a Sa GEESE 
Document Title | Page Te Document Title Bootstrap eCommerce Page Te 
Heading 2 
Heaaing 3 


12 In the Extract panel, select the company name. 


13 Deselect font-weight and line-height. 
Click the Copy CSS button. 


x 
i Extract 
i 


| @ | favoritecity-mockup.psd j200x i600 FIT [57.75% | 


il a 


Select all 
t width : 537px 
height : 42px 


font-family : Impact 
color; #eedd66 


font-size : S5ipx 
font-weight : 400 
line-height : 7. 2px 


i oe ee : 
LONDON ee PARIS NEW YORK 


t-shadow: Opx 5px 11] 


Once the styles are copied, you need to create a rule for the company name. 


14 In CSS Designer, select favorite-style.css. 
Create a new selector: header h2 
Paste the styles copied in step 13. 
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The text is formatted nicely but aligned to the left. 
15 If necessary, select the rule header h2 in CSS Designer. 
16 Click the Text category icon [T]. 


17 Choose text-align: center. 


POT) "Somer ntthint Coney j OC 4 let we Lj snow set 
: bootstrap-4.3.1.css { Read Only ) | Opacity 4 
ponerse a 
+ @Media : GLOBAL i 2 tet ae 
aera | font-family Impact 
+ - Selectors | font-style 
P Fiter CSS Rules | fontvarient 
sbg-dark | font-weight 
unavbar-dark .navbarnay .naytink | font-size 


| Ravbarnav neviten 
(header bes) 1 Dente 


18 In the Extract panel, select the motto TRAVEL WITH A DIFFERENCE. 
Deselect line-height and copy the CSS. 


19 Insert the cursor at the end of the company name. 
20 Press Enter/Return to create a new line. 

21 Type TRAVEL WITH A DIFFERENCE 

22 Create a new rule: header p 


23 Paste the styles on the new rule. 
Add the property text-align: center 


250 300 350 400 ASO 500 550 600 650 700 750 $60 850 909 950 100 


“FAUORETE CITY TOUT 


ULRYANAELL WUT A UL LPLELM ELLE 


The text in the header is complete. It may need some tweaking, but let’s move 


on for now. 
24 Save All. 


Next you will apply the company logo as a background image. 
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® Note: Hex colors 
depict RGB values using 
three pairs of letters 
and/or numbers. When 
the pattern uses identi- 
cal pairs, like EEDD55, 
you can abbreviate the 
color pair with a single 
character like EDS. 
Although the abbrevi- 
ated color is valid in 
HTML, don’t be sur- 
prised if Dreamweaver 
rewrites it out fully. 


Adding a background image to the header 


The company name and motto cannot appear in the same space as the logo image 
unless the text is added to the image itself or unless the image is inserted as a back- 
ground property. Backgrounds can be composed of one or more images and at least 
one overall color. When layering more than one effect, you have to make sure you 


order the properties correctly. 


, 


1 If necessary, open mylayout.html in Live view and make sure the document 


window is at least 1200 pixels. 


In CSS Designer, make sure the All button is selected. 
Deselect Show Set, if necessary. 


Create the following rule: header 
Click the Background category icon in the new rule. 


Click the background-color color picker. 
Enter #EDS5 in the color field. 
Press Enter/Return. 


Filey CC Libraries Insert CSS Designer # Filer CC Ubrartes insert 


SS Designer 


Ait Current 


+ Propertiag + — Sources + — Properties + — Sources / + = Properties 

8 BA & Show Set BOBS (2 Show Set B@eagato £3 Show Sex 

ae 3.1c8s ( Read Onty } i 4.3.1.08% { Read Onty } 

xt Backpiaund | 
_ Secsoioune favorite-styles. oe favorite-styles.css 

+ @Mosdla : GLOBAL + @Media : GLOBAL 
GLOBAL GLoBaL background -imag: 
+ © Selectors + = Selectors s 


text- shadow 
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fl Ab ab ab 


grater 7, 


s€D5| 


RGSs Hex | HSia | 


Yoke 


The <header> displays a background color matching the navbar. Let’s add the 
logo image now. 
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6 Click the Browse icon [§ in the background-image property. 


Wy 


| Files CC Libraries Insert CSS Designer 


ee All Current 
+ — Sources + Properties 
ALL SOURCES 7S (=) (J Show Set 


Background 


Read Only ) 


% 
g 
s 
: 
$ 
: 
‘ 
: 
it 


eisisoentinantect el Ra cece oe ‘ ra #EEDDSS 
+ — @Media: GLOBAL seed 
GLOBAL ' background-image _ 
= calacnre ' url Enter file path Re 
: radient none 
& Filter CSS Rules ‘ : L 
-bg-dark _ background- 
~ ay - position 
-Navbar-dark .navbar-nav .nav-link " background- 
-Navbar-nav .nav-item | size 
_ background- 
header h2 dip 
header | background- 2 
: : repeat Hee 5 = 
header : : . background- 
origin 


7 Select favcity-logo.jpg from the lesson06 images folder. Click Open. 


Ls f 
, 
elt > images ; S Q Search 
Name “Date Modified Size Kind 
_ 40X40.gif 9/17/19, 7:44 PM 15..ytes GIF Image 
100X125.gif 9/17/19, 7:44 PM 37..ytes GIF Image 
eee 400X200.gif 9/17/19, 7:44 PM 1KB GIF Image 
== 1920x500.gif 9/17/19, 7:44 PM 7 KB GIF Image 


== favcity-logo.jpg Today, 10:47 AM JPEG image 


Options 


The logo image appears in the header, but it is cut off at the bottom and is 
repeating horizontally. By default, background images repeat horizontally and 
vertically. In some cases, a repeating background is desirable, but not here. A 
few CSS tweaks should make the background look great. 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 193 


8 Inrule header add the following properties: 


9 


background-position: center center 
background-size: 80% auto 
background-repeat: no-repeat 


Files CC Libraries Insert CSS Designer 


All Current 
+ — Sources is Properties 
ALL SOURCES aa 
bootstrap-4.3.1.css_ ( Read Only ) eons 


favorite-styles.css 


j : color 
+ @Media : GLOBAL 


GLOBAL background-~image 
+ - Selectors 


oon gradient = none 
P&P Filter CSS Rules ae 


url images/favcity-logo.jpg 


ih 


(] Show Set 


_ background- _ (2 zeeppss 


bo : eee : center center 
snavbar-dark .navbar-nay .nay-link : epee 
background: 50% Gta, 

snavbar-nav .nav-item _ size oe Toecened 

» background- 
header h2 dip 
header p — /Be i 8 
header cas = background- i.e) 

» origin 

_ background- 


All Mode: Lists rules for entire document 


The background image looks better, but it’s still cut off at the top and bottom. 


Click the Layout category icon ic. 


10 In the rule header add the following property: 


height: 212px 


Files €€ Libraries insert. CSS Designer - 
“styles.css* iquery-3.3.L.minjs popper.minjs bootstrap~4.3.1js 
All Current 

+ — Sources | + — Properties 
ALL SOURCES: : fe &] (} show Si 
bootstrap-4.3.1.css_ { Read Only } 

: ; ie layout 
favorite-styles.ces. : 


GLOBAL 


+ @Media : GLOBAL 


© width 


2 Min-width 


© min-heigh 
+ — Selectors i vheam 

. Seecwieth 

P Filter OSS Rises i 

2 Brpcheight, 
bg-dark 

| display 
sRavbar-dark Wnavbar-nay .nav-tink : ie 

| box-sizing 
Javbarnav .paviten é 
heater h2 : {oaks s 
header p 
header 


The header expands to display the logo fully. The company name and motto are 
not centered over the background image. Another tweak to the text elements 


and the header will be complete for now. 
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margin-top: lem 
font-size 350% 
line-height: 1.2em 


letter-spacing: 0.12em 


11 In the rule header h2 edit or add the following properties: 


+ — Sources 

ALL SOURCES 
bootstrap-4.3.1.css_( Read Only } 
+ @Media : GLOBAL 
GLOBAL 

+ - Selectors 
P Filter CSS Rules 

g-dark 


| + Properties 

| @ & &] () Show S: 
+ font-weight 
| font-size 
\ fine-height 
© text-align 
{ text-decoration; 
i text-indent 


‘ text-shadow 


snavbar-dark .navdar-nay .nay-link j mehadow Hy Ove 
| wshadow : Spx 

naybar-nay .nav-item H Se 

: c ’ blur 

header hz: : 

header p pcs 

header 


2 oword-spacing 


These specifications bring the company name more into alignment with the 
mockup. A further tweak to the motto should finish the job. 


12 In the rule header p edit or add the following properties: 
font-size: 150% 
line-height: lem 
letter-spacing: 0.4em 


+ — Sources i + — Properties 
BE OU 88268 (3 show Set | 
~ bootstrep-4.3.1.cs¢ (ReadOnly) | : 
. = font-size t 
favorite-styles.css tag 
: as | Hine-height 
¥ @Media ; GLOBAL ‘text-align == 
GLOBAL | text-decoration: NTT 
text-indent 
+ — Selectors 
P Filter CSS Rules text-shadow 
“bg-datk | Weshadow sO px 
naybar-dark .navbar-nav navelink | W-shadow : 3px 
cpaybar-nay .nav-item | blur + 5.9Spx 
header h2 | color : MP robai0, 0... 
saa | texttransfomm ; [Q Ab AB ab 


The motto appears over the background image and is spaced out as it appears in 
the mockup. There’s one last chore to take care of to finish the header. 


In the mockup, a light yellow line separates the navbar from the header. The line 
does not extend all the way to the edges, so you need to identify an element that 
has the same properties. 

The header extends from edge to edge, but the horizontal menu doesn't. That 


should give you a good suggestion. 
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13 Click one of the menu items. 


The div.container encompasses the entire navbar and looks like a good 


candidate for a border. 
14 Select the div.container tag selector. 


The Element Display appears. Note that the selection does not extend to the left 
and right edges. 


15 Create the following rule: nav .container 


Don’t forget to add the space after the nav element. 


16 Add the following properties to the new rule: 
padding-bottom: 10px 
border-bottom: 2px solid #FF3 


+ — Sources +e Properties 

ALL- SOURCES fe SB Be (J Show Set 
~ ootstrap-4.3.1.css ( Read Only 

favorite-styles.css 


3 Border 


+ @Media: GLOBAL oe ; 
eeerth = Bo Oe 
+ — Selectors 
2 Fitter CSS Rules 
bg-dark 
sfevbar-dark .navbarnay nav-Bnk 


spavbar-nay nev-item 


The header is complete and formatted for desktop screens. 
17 Choose File > Save All. 


In upcoming lessons, you will learn how to adapt and format various page compo- 
nents for desktop screens, smartphones, and tablets. 


Finishing up the layout 
There are still a few specifications that need to be applied to the layout. The rest of 
the work should go pretty quickly. 


1 Ifnecessary, open mylayout.html in Live view. 
Make sure the document window is at least 1200 pixels. 


In the mockup, there are wide borders on the left and right sides of the layout. 
Since the borders extend to the edges of the screen, the body element is a good 
target for this styling. 


2 In favorite-styles.css create the following rule: 
body 
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3 Create the following properties in the body rule: 
border-right: 15px solid #ED5 
border-left: 15px solid #ED5 


+ = Sources | + — Properties 

ALL SOURCES ; | eS {I show set 

~~ boststrap4.3.b.css (Read Only > 
oeneaacanimcumsenn me | © eorder 
favorite-styles css = : 

} + @ Media: GLOBAL 

GLOBAL 


border 


+ ™ Selectors 
P Fiter CSS Rus 

bp-dark 

favbar-dark navtarnay nav-ink 


Ravbarney .naveitem 


Large borders appear on the left and right sides of the layout. 


You will deal with the main content of the page in the next lesson. For this les- 
son, the last part of the layout you need to address is the footer. First, let’s bring 
over the text from the mockup. 


4 Select and copy the footer text in the Extract panel. 


5 In mylayout.html, select the text in the footer and paste to replace it. 


The text in the footer is aligned to the center. By default, text aligns to the left in 
HTML. So that means something is overriding the default behavior. 


6 Select the footer tag selector. 
Note the class assigned to the footer element. 


The class .text-center applies the styling. 


7 Remove the class .text-center from the footer element. 


pS ee Sa We tds oo ae ap ae Sa ros ped ye oe Ie aL Ws 


body footer .text-center div .container div TOW div col-12 


body div container div TOW div col-12 


The text now aligns to the left. The last step is to apply the background color. 
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8 In favorite-styles.css create the following rule: 


footer 


9 Create the following properties in the footer rule: 
padding-top: 5px 
color: #069 
background-color: #ED5 


10 Choose Save All. 


Congratulations! You have learned how to extract styles from a Photoshop mockup 
and apply them to a predefined Bootstrap template. As you work through the 
upcoming lessons, you will continue to tweak and format the content and learn a 
variety of HTML and CSS tricks. In the next lesson, you will turn this Bootstrap 
starter layout into your Dreamweaver site template. 
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Review questions 


—_ 


wu F&F WwW N 


Does Dreamweaver provide any design assistance for beginners? 
What advantages do you get from using a responsive starter layout? 
What does the Extract panel enable you to do? 

Does Extract enable you to download GIF image assets? 


True or False. All the CSS properties generated by the Extract panel are accurate and 
are all you need to style a webpage and its content. 


How many background images can you apply to an element? 


Review answers 


1 


Dreamweaver (2020 release) provides three basic layouts, six Bootstrap templates, four 
email templates, and three responsive starter layouts. 


Responsive starter layouts help you jumpstart the design of a site or layout by provid- 
ing a finished layout complete with predefined CSS and placeholder content. 


-The Extract panel enables you to derive CSS styling, text content, and even image 


assets from page mockups created in Adobe Photoshop and Adobe Illustrator. 
No. Extract supports only the PNG and JPEG image formats. 


False. Although many of the CSS properties are perfectly usable, styling in Photoshop 
and Illustrator is geared for print output and may not be entirely suitable for web 
applications. 


CSS can apply several background images but only one background color. 
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WORKING WITH TEMPLATES 


Lesson overview 

In this lesson, you'll learn how to work faster, make updating easier, 
and be more productive. You'll learn how to do the following: 

e Create a Dreamweaver template. 

e Insert editable regions. 

e Produce child pages. 

e Update templates and child pages. 


This lesson will take about 2 hours to complete. To get the lesson files 
used in this lesson, download them from the webpage for this book at 


www.adobepress.com/DreamweaverC1B2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 
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@ Update Template Files 


Update ail files Based on this template? 
about-us. btm! Site tesson07 


‘Save As Template 


Existing COMplAtes: ing cemplares) 


1 a Update Links? 
: Description: Favorite City Tour template 


New Document 


Site: Template for Site “esson08” 
& Accordion test favorite-temp 

B& AmazingRibs Media 

43 Amazingciis~ MAMP 

Ey Starter Templates && Bootstrap-test 


ia New Document 


. coxsommy G8 Craig Goldwyn 
‘Site Templates & FT-template J Drearmnveaver will automatically convert this 
see 2 & jewelers Association document to a iemplate. 
& tesson01 
B tesson02 
& tess0n03 
& lesson04 


:. ~ oe ? favorite City Tour template i 
Name: [MainContent B lesson0S : 


lesson06 
This region will be editable in ( & 
documents bused on this template. ee. & tessond7 


(3 Ban’ show me this message 
again 


23 Update page when template changes 
Update Pages 


x“ Look in: | favorite-temp, about-us 


Validation Update: {7} Library items 


e File/URL line Description © Tempiares 
©) mylayout.html! {htmlS} see 


Le fog Done 


Updating NewRoad:MacProjects:Peachpit:OWCC2020-webs:DWCC2020:Lessons:lesson07 
updated about-us, htm! 
Done. 
files examined: 1 
files updated: } 
files which could not be updated: 0 
total time: (0:00:00) 
Current document validation complete [ 0 Errors, 0 Warnings, 0 Hidden } 


Dreamweaver's productivity tools and site- 
management capabilities are among its most 
useful features for a busy designer. 
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® Note: Download the 
lesson files and create 
a new site for Lesson 6 
as described in “Getting 


Started.” 


% mylayouthtiml 


Source Code 


Creating Dreamweaver templates 


A template is a type of master page from which you can create related child pages. 
Templates are useful for setting up and maintaining the overall look and feel of a 
website while providing a means for quickly and easily producing site content. A 
template is different from a regular HTML page in Dreamweaver. 


In a normal webpage, Dreamweaver can edit the entire page. In a template, 
designated areas are locked and cannot be edited. Templates enable a workgroup 
environment in which page content can be created and edited by several team 
members, while the web designer controls the page design and the specific ele- 
ments that must remain unchanged. 


Let’s take a look at the sample layout and identify the areas that will be locked and 
the ones that will be editable. 


1 Launch Dreamweaver (2020 release) or later. 


2 Open mylayout.html in Live view from the lesson07 folder. 
Make sure the document window is at least 1200 pixels wide. 


mytsyout2.hinit  & mylayours.htnt 


boatstrap~4.3.L.css favorite~styles.css* jquery-3.3.1.minjs popper.minjs bootstrap-4,3.ijs 


@ i218xs63 ~ fh 


3 Examine the layout top to bottom. 


The page is divided into areas that focus on different purposes, such as navigation 
corporate identity, editorial content, contact information, and legal notices. 


, 
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There are three different types of content models in the editorial section: an image 
carousel, a card-based section that focuses more on images, and a list-based section 
that focuses more on text. 


The editorial content is the only thing that will change on each page; these other 
areas will remain the same throughout the site. People often refer to such areas as 
boilerplate. In the template, those areas will be locked inside Dreamweaver. 


When the layout is converted into a Dreamweaver template, the section containing 
the editorial content will be designated an editable region. But before we do this, 
you have some work to do. The current layout is too busy. A template needs to be 
stripped down to the minimum essential components. 


Removing unneeded components 


A template should be pared down to the fewest possible basic elements. This will 
minimize any cleanup work when creating child pages going forward. Let’s start 
with the card-based section. 


If your document window is at least 1200 pixels in width, you will see six card 
elements in two rows. You will use these elements to build tour descriptions in an 
upcoming lesson. But there’s no reason to keep all six elements in the template. 
One row would be sufficient in the template. 


1 Select the 400 x 200 image placeholder in the first element in the second row. 


= ino EE Ed 


Card title Card title 
Some quick example text to build on the j Some quick example text to build on the — 
card title and make up the bulk of the card title and make up the bulk of the 
card's content. H card’s content. 
Add'to Cart 
container i row.text-center ¥  .col-md-4.pb-1.pb-md-0 card img card-img-top 


The Element Display appears focused on the <img> element. 


If you examine the tag selectors, you can see that the image placeholder has four 
div parents. Using the tag selectors is one of the best ways to divine the struc- 
ture of your HTML content. 
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2 Select the first parent of the image placeholder, div.card. 


Sv Re 


400 x 200 


Card title 


~ Some quick example text to 
build on the card title and make 
up the bulk of the card's 


Card title 


Some quick example text to 
build on the card title and make 
up the bulk of the card's 


content. content. 
Add to Cart Add to Cart 
{iy 
container div row.text-center.mt-4 div col-md-4.pb-1ph-md-0 card inp card-ieng-top 
sy bv Class (card ¥) 


The Element Display changes focus to div. card. You can see by the blue bor- 
der that most of the first card element is selected. The objective is to select the 


entire row of elements, if possible. 


3 Select the div.col-md-4.pb-1.pb-md-0 tag selector. 


This tag selector highlights the entire first card. 


4 Select the div. row. text-center.mt—4 tag selector. 


‘The entire second row is now selected, but you can see that there is still one 


more tag selector. 


5 Select div.container. 


Card title 


Some quick example text to build on the 
card title and make up the bulk of the 


400 x 200 


Card title 


Some quick example text to build on the 
card title and make up the bulk of the 


card's content. card's content. 


Add to Cart 


Add to Cart 


Properties 


~ divin 
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400 x 200 


Card title 


Some quick example text to build on the 
card title and make up the bulk of the 
card's content. 


Add to Cart 


This tag selector highlights the entire card section. We went too far and need to 
go back to the last selection. In most cases the last tag selector is still visible. 


6 Select the div. row. text-center.mt-4 tag selector. 
If you don’t see the previous tag selector, repeat steps 1—4 to select the 


proper tag. 


div ET ES RO 


400 x 200 


Card title 


Some quick example text to build on the 
card title and make up the bulk of the 
card's content. 


Add to Cart 


container Ee -row.text-center.mt-4 


body div 


400 x 200 


Card title 


Some quick example text to build on the 
card title and make up the bulk of the 
card's content. 


Add to Cart 


Properties 


co «COP vd 


The entire second row is selected again. 


7 Press Delete. 


The row is deleted, leaving only one row of placeholders in the card section. 


Let’s move to the list-based content. 


The list-based section is built differently from the card-base one. Deleting the 
extraneous elements will require a slightly different procedure, but it still starts 


with the tag selectors. There are three rows of elements in this section. The goal 


is to have only one row when you're done. 


8 Select the image placeholder on the first element in the third row. 


faucibus. Ea 


iawn ensnasoons 


Cras sit amet nibh libero, in 


scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. ; 
Donec lacinia congue felis in 


body div container div row col-ig~4 list-unstyled 


List-based media object = 
gravida nuita. Nulla verimetus 4 : te 


mi 


faucibus. 


List-based media object 
Cras sit amet nibh libero, in 


gravida nulla; Nulla vel-metus i) 


scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in: ; | 


vulputate at, tempus viverra 
turpis. Fusce condimentum 

nunc ac nisi vulputate fringilla.: : 
Donec lacinia congue felis in 
faucibus. _ 
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selector is not visible, 
start the selection pro- 
cess again from step 1, 
as necessary. 


© Note: When delet- 
ing elements, be sure 
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blue border. An orange 
border indicates that 
only the content within 
the element is selected 
and not the element 
itself. 
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ain 


Properties 


Format 


List-based media object 1 | 


As you can see from the tag selectors, the image placeholder is part of an unor- 
dered list. But you can’t remove the third row by deleting the list itself, because 
the lists are displayed vertically not horizontally. 


9 Select the ul tag selector. 


Cras sit amet nibh fibero, in 


gravida nulla. Nulla vel metus 


scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in| { | 


vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 
faucibus. 


Cras sit amet nibh libero, in 


gravida nulla. Nulla vel metus |: | 


scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in) : | 


vulputate at, tempus viverra 
turpis. Fusce condimentum 


nunc ac nisi vulputate fringilla. i 


Donec lacinia congue felis in 


FEATURED PRODUCT 


~ List-based media object 4 | | 


He) 


List-based media object2. 


Cras sit amet nibh libero, in 
gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in: ¢ | 


vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 
faucibus. 


List-based media object 5 | 


Cras sit amet nibh libero, in 
gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 


Rica ihe 


TERRES 


List-based media object3_ 


Cras sit amet nibh libero, in 
gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in: | 


vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 
faucibus. 


List-based media object 6 
Cras sit amet nibh libero, in 
gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 


1S) 1218x563 


The Element Display highlights the first whole column of the list-based section. 


The three rows are actually three unordered lists, each with three list items. 


To delete the second and third rows, you'll have to delete the last two items in 


each list. 


As before, the 1i tag selector from the third item in the first column should still 


be visible. 


10 Select the 1i tag selector and press Delete. 


faucibus. 


List-based media object 
Cras. sit amet nibh libero, in 
gravida nulla, Nulla vel metus | 
scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in|} i | 


vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla, 


Donec lacinia congue felis in 
faucibus. 


v Chass ¢ 


The third item in the first column is deleted. 
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faucit 


List-I 
Cras ¢ 
gravic 
sceler 
Cras j 
vulpu! 
turpis 
nunc : 
Donex 
faucit 


Praperties 


SSH 


Sp 2s 


Donec lacinia congue felis in 


faucibus. 


Format None 


Cras sit amet nibh libero, in 
gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 


Cras purus odio, vestibulum in: 


vulputate at, tempus viverra 
turpis. Fusce condimentum 


nunc ac nisi vulputate fringilla.: | | 


Donec lacinia congue felis in 
__ faucibus. 


HERES 


FEATURED PRODUCTS 


List-based media object 2. 


Cras sit amet nibh libero, in 


gravida nulla. Nulla vel metus | 
_ scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in: 


vulputate at, tempus viverra 
turpis. Fusce condimentum 


nunc ac nisi vulputate fringilla. ; 


Donec lacinia congue felis in 
faucibus. 


11 Repeat step 10 to delete the second and third list items in each column. 


Cras sit amet nibh libero, in: 
gravida nulla. Nulla vel metus | 
scelerisque ante sollicitudin. 

Cras purus odio, vestibulum in’ 
vulputate at, tempus viverra : 
turpis. Fusce condimentum — 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 


bady » HESB container “div row div” col-lg-4 @ 1218x563 » [By 


The list-based section now shows one row of elements. Let’s turn to the bottom 
of the layout now. 


Above the footer is a section containing three columns of links and an address 


block. 


12 Click the last link anchor in the first column. 
Examine the tag selectors. 


indian Treasure Link 
Quitman, WA, 99110-0219 
P: (123) 456-7890 


FREE EEE TEV REALS SSS 


Full Name 


hs saaxasviaie ened eeeeerees® 


body div div row div col-6.col-md-8.col-ig-7 div —_.row.text-center div .col-sm-6.col-md~4.col-lg-4.col-12 ul. tist-unstyled © 


MyStoreFront,Inc. 


As with the list-based section, the links are contained in three columns of unor- 
dered lists. 


In Live view, to end up with only one link per column, you'll have to delete the 
extraneous links one at a time. The DOM panel offers a quicker way. 


13 If necessary, choose Window > DOM to display the DOM panel. 
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14 Select the 1i tag selector. 


; MyStoreFront, inc. 
indian Treasure Link 


: Quitman, WA, 99110-0219 
2 P: (123) 456-7890 


Full Name 


.€6}-6.col~md-8.col-ig-7 av stow, text-center ¥  .col-sm-6.col-md-4.col-Ig-4.col-12 ul list-unstyled | 
Properties — 
Because you selected the list item in the document window, the DOM panel 
focuses on that element. You should see the last item selected in the panel. 
15 In the DOM panel, hold the Shift key and click the second item in the list. 
DOM Assets Snippets — x : : : Oe = DOM Assets Snippets — : Soe ; 5 : : ne : = 
¥ row .text-center v row .text~center 
v [a> col-~sm-6 .col-md=4 .col-lg~4 .col-12 ~ [BS .col-smn-6 .col-md-4 .col-ig~4 .col-12 
» [DD Jtist-unstyled “v [GD stist-unstyted 
> [> vtr-tink > [> dtn-tink 
> (BY bin-tink ae Sati 
> (> bin-tink 


> [> bn-ink 


> [BiX> .col-sm-6 .col-md-4 .col-Ig-4 .col-12 : > [GY col-sm-6 .col-md-4 .col-Ig-4 .col-12 


Four of the list items are highlighted. 
16 Press Delete. 


: 
| 


The selected list items are deleted. 
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17 Repeat steps 14—16 to delete the unneeded links. 


“MyStoreFront, inc. 
Indian Treasure: Link 
Quitman, WA; 99110-0219 
P: (123) 456-7890 


Full Name 


Ties] jas S(y = sVeatatl: 


Te 
: 
; 


dy div dv row div .col-6.col~md-8.col-g-7 div row.text-center div .col-sm~-6.col-md-~4.col-lg-4.col~12 ul ilist-unstyled 11> .bn-tink 


18 Save the file. 


With all the links deleted, there’s now a large open space on the left side of the 
page. It would nicer if the three links simply spanned the bottom of the page. In 
the next exercise, you'll learn how to reformat a Bootstrap layout. 


Modifying a Bootstrap layout 


Bootstrap uses a row-and-column metaphor to control the way elements divide the 
page. It’s based on a 12-column grid in which each element is assigned a specific 
number of columns in the parent element. But it doesn’t stop there. You can also 
allocate the columns for each size screen that is viewing the page. 


The assignments are made using predefined classes stored in the Bootstrap style @ Note: Although the 


sheet. The classes are normally given to div elements that are used to wrap the Bootstrap standard is to 


content. You can see these wrappers sprinkled through the layout you’re currently 


use <div> elements, 
you can assign the 


working with. If you look carefully at the structure you were just editing in the classes to any element. 


DOM panel, you should be able to find the Bootstrap parent element of the three 
unordered lists. 


1 Select div.col-6.col-md-8.col-1lg-7 in the DOM panel. 


OOM Assets Snippets 


pee) 
» [GRD .col-6 col-md=8 col-ign? k 
v [d% wn row .textecenter ie 
> [BY col-sm-6 .col-md~4 .col-lg-4 .col-12 
> (SY coi-sm-6 colemd-4 .colelg-4 coled2 
¥ [> .col-sm-6 .col-md=4 .col-Ig-4 .col-12 
» (DD Jist-unstyled 
~ [1 .bin-tink 
{> 
a col-md-4 .col-lg-§ .col-6 
Ooter 
v 


In CSS Designer, you can see the classes assigned in the Selectors pane. 


t bg-dark.p-4 a cw dle <o}-6.col-md-8.¢ 


2 Click the Current button in CSS Designer. 
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Files CC Libraries insert CSS Designer 


All 


+ Sources ; bootstrap-4,.3.1...) 


Cs 


Current 


Properties 


bootstrap-4.3.1.css ( Read On... Show Set 
favorite-styles.css 
@Media 
GLOBAL 
{| ( min-width : 576px ) 
|| ( min-width : 768px ) 
|] Cmin-width : 992px ) 
Selectors 
iter OSS Rules 
COMPUTED. 
.cal-lg-7 
,col-1, .col-2, .col-3, .col-4, .col-5, ... 
les for current selection 
>? 
Files CC Libraries insert CSS Designer = 
All Current 
2 Sources : bootstrap~4.3.1... Properties 
bootstrap-4.3.1.css (ReadOn.. = ff [] Show Set 
favorite-styles.css H es 
@Media oe 
aie ee, prncwrith 
|] ( min-width : 992px ) : 
fl ( min-width ; 1200px ) fs] 
| C min-width : 768px ) SER EES ‘ 
] Cmin-width ; 992px ) Foe 
Selectors 
COMPUTED 
.col-lg-7 
scol-1, .col-2, .col-3, .col-4, .col-5, ... 
Current Mode: Lists rules for current selection 
>> 
Files CC Libraries insert CSS Designer m3 
Alt Current 
+ Sources ; bootstrap-4.3.1... Properties 
bootstrap-4,3,.1.css ( Read On... fa [=] {3 Show Set 


favorite-styles.css 


@Media 


fC min-width : 992px ) 

] ( min-width ; 1200px ) 
I ( min-width ; 768px ) 

{ ( min-width : 992px ) 


Selectors 


COMPUTED 
coKlg-7 


.col-1, .col-2, 
.col-md-8 
scol-6 


¥ kobnfaen Keattar 


Current Mode: Lists rules for current selection 
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3 Select the rule .col-6. 


Can you guess what this rule formats? It sets the 
width of the div at six columns. Since Bootstrap 
uses a 12-column grid, the div will assume half the 
width of its parent element. 


In the CSS Designer @Media pane, you can see 
that the GLOBAL reference is bolded. That means 
this rule sets the default size of the element. The 
div will be six columns wide no matter what 
size the screen is unless another rule overrides 
this style. 


Select the rule .col-md-s. 


You probably already guessed that this rule sets 
the width of the div to eight columns. But the rule 
also has another modifier: md. The letters stand 

for “medium, or more precisely, medium-sized 
screens. _ . 


Once you know that Bootstrap uses a grid to divide 
the screen, the next question is: what size screen? 
Bootstrap answers that question by defining several 
default screen sizes: extra small (xs), small (sm), 
medium (md), large (Ig), and extra large (xl). You 
can see the sizes displayed in the @Media pane as 
you click each selector. When you clicked the rule 
.col-md-8, the media query (min-width: 768) 
was bolded. That means this class is activated 
whenever the screen is at a minimum width of 

768 pixels. 


Select the rule .col-1lg-7. 


This rule sets the width to seven columns on large 
screens, or those with a minimum width of 992 
pixels. Note that this rule appears at the top of 
the selectors list. Since the document window is 
at 1200 pixels or wider, this rule is being applied, 
overriding the others. 


To change the width of the link section, you need 
to change the class applied to large screens. 


6 Inthe Element Display, edit the class .col-1g-7. 
Update the class as highlighted: .col-1lg-12 
Press Enter/Return to complete the change. 


i : MyStoreFront, ine. ’ 
= Indian Treasure Link 


is | 


: MyStoreFront, Inc. 


The link section now stretches across the entire bottom. Notice how the address 
section bumps down because it can’t fit on the right side anymore, but it still 
occupies the same portion of the section as it did before. 


That’s the way Bootstrap works. Each element is assigned a number of columns 
and maintains that width regardless of what happens to the other elements. 
Let’s adjust the width of the address block too. 


7 Click the address element. 


| address [i | 
i MyStoreFront, inc. 
; Indian Treasure Link 
| Quitman, WA, 99110-0219 


m P; (123) 456-7890 


Full Name 


ody div .container.text-white.bg-dark.p-4 div row div .col-md~4.col-lg-5.col-6 address 


iperties 


Format None v 
In 


You should be able to see the Bootstrap wrapper in the tag selectors or the 
DOM panel. 


8 Select the div.col-md-4.col-lg-5.col-6 tag selector. 


The address section is assigned five columns on large screens. To fill in the open 
space to the right, just edit the large class as you did earlier. 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 


9 Edit the class .col-1lg-5 as highlighted: .col-lg-12 
Press Enter/Return to complete the change. 


MyStoreFront, Inc. 
| Indian Treasure Link 


The change forces the wrapper to extend all the way across the layout. But 
there’s a problem. Although the address section is wider, the line-by-line struc- 
ture of the address itself still wastes a lot of space. 


You may have noticed that the address section has two content elements. The 
top one is the street address, and the bottom is an email address. Using Boot- 
strap classes, we could make the two elements split the available space side 

by side. 

Although Bootstrap classes are usually assigned to separate div wrappers, 
there’s nothing preventing you from applying the classes directly to any element. 


10 Click the company address. 
Select the address tag selector. 


The Element Display appears focused on the address element. 


11 Click the Add Class/ID icon [+). 
Type .col-lg-6 and press Enter/Return. 


MyStore Yont, inc} 
indian Treasure Link 
Quitman, WA, 99110-0219 
PB; (123) 456-7890 


Full Name 


The address element resizes to half the width of the parent. Let’s apply the 
same style to the email address. 


12 Click the email address. 
Select the address tag selector. 
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13 Add the class .col-1g-6 to the element. 


The element width resizes to half the width of the parent. But there’s a prob- 
lem. The two address elements are still stacked vertically. The class assigned 
applies the proper width to the elements, but it doesn’t control how they align 
on the page. 


If you check the link or the other multicolumn sections, you will see they all 
have the class . row assigned to the wrapper element. 


14 Select the div.col-md-4.col-1lg-12.col-6 tag selector. 


Seer 


“WIN .col-md-4 .col-ig-12 -Col-6 
+ 


eee ae eetiee eo 


ody div container.text-white.bg-dark.p-4 


perties 


Format None v 


This div wraps the two address elements but does not feature the . row class. 


15 Add the class . row to the div element. 


Ciba .colmd-4 
poet 


or ee Linkanchomesh= Gp, See aN ee Pe a Minicantonar ao) Gos 


2 firstilast@example.com 


The two address elements now display side by side. 


That takes care of the layout issues for the moment, but text in the address ele- 
ments is still formatted for the original black background. A darker color would be 


more appropriate. 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 213 


Modifying text formatting in 
a Bootstrap element 


If you want to change the formatting of content that is already styled, the first step 
is to identify any rules affecting that element. 


1 Select any part of the company address. 
Select the address tag selector. 


2 Click the Current button, if necessary. 


The Selectors pane displays all the rules styling the address element. Inspect 
the rules starting at the top of the list until you find the rule applying the color. 


The rule .text-white applies the color #f ff, but that class is not applied to 
the address element. Let’s find out where the class is assigned. 


3 Examine the tag selectors interface to identify the element displaying the class 
. text-white. 


The class appears on div. container .text-white.bg-dark.p-4, wrapping 
the link and address sections. 


4 Select the div.container.text-white.bg-dark.p-4 tag selector. 


- 


aaneee ee eameecebeeseictted 


j See a ee Bue a i Sree 
i a 


bs See eee tard 7s) aA ae RS SAAS ENDS ACRES: (Je P tae eat P OP eta e aad a AAD HARD AS 


MyStoreFront, Inc. Full Name 
Indian Treasure Link i t 


Quitman, WA, 99110-0219 


only dy i Container.text-wnite.bg=dark.p-4 div ow div .col-md-4.col-Ig-12.coi-6.row — address col-ig~-6 Strang 


perties 


Title 


aN Tarnot 


The area highlighted is formatted by the new logo color. There’s no longer a 


need for the white text color, so you can simply delete the class . text-white 
altogether, 
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5 Click the Remove Class/ID icon - 


ie MyStoreFront, inc. 


Indian Treasure Link 
j | Quitman, WA, 99110-0219 


{49 5 


Once the class is removed, the address text displays in black. The site theme 
shows this text styled in blue. Changing the color will require a new rule. 


6 Select the address tag selector. 
7 In CSS Designer, click the All button. 


8 Select favorite-styles.css. 
Click the Add Selector icon *. 


A custom selector name appears. 
9 Create the following selector name: address 
This selector will target only the address elements. 


10 Add the following property to the address rule: 
color: #069 


turpis. Fusce condimentum 


i Files CC Libraries Insert CSS Designer 3 
nunc ac nisi vulputate fringilla.: All 


Donec lacinia congue felis in 


Current 


+ — Sources: favorite-styles...' + — Properties 


bootstrap-4.3.1.css ( Read Only ) Show Set | 
z | #069 |e a 
fa 
0 + — Selectors 

P Filter CSS Rules 

feauer p 
header 
nay .container 1 
body 


footer 


y div container. bg-dark.p-4 div row div col-md-4.col-lg-12.col-G,row 


The text in the address elements displays in blue. The formatting of the layout 
matches the mockup now. 


11 Choose File > Save All. 
The last task before creating the Dreamweaver template is to complete any boiler- 


plate and placeholder content. 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 215 


Adding template boilerplate 
and placeholders 


Boilerplate and placeholder content should always be complete before converting a 
layout into a Dreamweaver template. Some boilerplate is already in place, as in the 
top navigation menu. Since the address block is visible now, let’s start there. 


1 Open mylayout.html in Live view from the lesson07 folder. 
Make sure the document window is at least 1200 pixels wide. 


2 Select the text MyStoreFront, Inc. and type 
Favorite City Tour to replace it. 


3 Select the text Indian Treasure Link and type 
City Center Plaza to replace it. 


4 Replace the text Quitman, WA, 99110-0219 with 
Meredien, CA 95110-2704 


5 Replace the phone number (123) 456-7890 with 


(408) 555-1212 


The first address element is complete. 


6 Select the text Full Name and type 
Contact Us 


7 Select the text first.last@example.com and type 


info@favoritecitytour.com 


address 


1 SSS 


The two address elements are complete. Let’s move back to the top of the layout. 


In the navigation menu, the company name is styled in white. You will deal with 
this styling when you learn more about hyperlinks in Lesson 10, “Working with 

Navigation.’ For now, let’s leave it as it is. The next boilerplate appears below the 
image carousel in the text Free Shipping, Free Returns, and Low Prices. 
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Although no similar text appears in the mockup, these links provide an excel- 


lent opportunity to improve on the original concept design. 


8 Select the text Free Shipping and type 
Get a Quote 


9 Change Free Returns to Book a Tour 
Change Low Prices to Bargain Deals 


No reason to stop with these links. 


10 Select the headline RECOMMENDED PRODUCTS. 
Type INSERT HEADLINE HERE 


GetaQuote ‘BookaTour | BargainDeals 


ae 


INSERT HEADLINE HERE 
h 


11 In the first card element, select the text Card title. 
Type Product Name to replace it. 


12 In the card description, select the text card title and change it to product name. 


Change card’s content to product description. 


13 Select the button text Add to Cart. 
Type Get More Info to replace it. 


HMNOCMN! MICAYLIING PIcneo 


400 x 200 400 x 200 


Product Name Card title 


Some quick example text to build on the Some quick example text to build on the 
product name and make up the bulk of 


the product description. 


Get More Info 


card title and make up the bulk of the 
card's content. 


Add to Cart 


The first card element is complete. 
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14 Repeat steps 10-13 on the remaining card elements. 


400x200 — 


Product Name 


Some quick example text to build on the 
product name and make up the bulk of 
the product description. 


Get: More Info 


INSERT HEADLINE HERE 


400 x 200 


Product Name 


Some quick example text to build on the 
product name and make up the bulk of 
the product description. 


» Tip: Feel free to The three card elements are all updated. 


copy and paste the 


400 x 200 


» 


Product Name 


Some quick example text to build on the 
product name and make up the bulk of 
the product description. 


entire description from 15 Select the headline in the list-based section FEATURED PRODUCTS. 
the first item into the Type INSERT HEADLINE HERE 


other two cards. 


16 Select the text List-based media object 1. 
Type Insert Name Here 


17 Repeat step 16 on the remaining list-based headings. 


insert Name Here _ 
Cras sit amet nibh libero, in 


wes gravida nulla, Nulla vel metus | 


scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 
turpis. Fusce condimentum 


nunc ac nisi vulputate fringilla.’ | 


Donec lacinia congue felis in 
faucibus. 


INSERT HEADLINE HERE 
~ Insert Name Here 
Cras sit amet nibh libero, in 
180 REDS gravida nulla. Nulla vel metus 


scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 
faucibus. 


The text boilerplate is complete. 


18 Save all files. 


Cras sit amet nibh libero, in 
JOE CIN gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 
turpis. Fusce condimentum 


nunc ac nisi vulputate fringilla. 


Donec lacinia congue felis in 
faucibus. 


There are still a few things left to finish in the layout, some visible and some not. 


Fixing semantic errors 


With the development of HTMLS, a lot of emphasis was placed on developing 
semantic rules around the code elements and the structures they build. Earlier, 
you added a semantic element, header, for the company name and logo. Other 
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semantic elements are sprinkled throughout the layout. However, there are some 
elements in the current layout that violate the spirit of the new rules. 


There are several horizontal rule (<hr>) elements in the layout that are not used 
properly. Before HTMLS, horizontal rules could be used as graphical elements and 
as dividers between content. No one really cared. 


The new semantic rules define horizontal rules strictly as content dividers. The 
horizontal rules in this layout are being used incorrectly as graphical elements 

above and below the main headlines. They may be hard to see in the document 
window, so we'll use the DOM panel. 


1 Ifnecessary, open mylayout.html in Live view from the lesson07 folder. Make 
sure the document window is at least 1200 pixels wide. 


2 Select the text INSERT HEADLINE HERE at the top of the layout. 
3 Choose Window > DOM. 


The h2 element is highlighted in the panel. Note the hr elements above and 
below the headline. The rule above the headline could meet the sematic crite- 
rion, but not the one below. In this instance, we won't keep either one. 


4 Select and delete the hr elements in the DOM panel; 


DOM Assets Snippets = DOM Assets Snippets 
ry ve 
v col-lg-6 .col-10 .ml-1 v {div> col-ig-6 .col-10 sml-1 
(@) + D> sewtcener 
+ [b2> text-center = feces - container 
(G) v row .text-center H 
> [Low .container > Ldiv> .col-md-4 .pb-1 ._pb-md-0 
hr> > [div col-md~4 .pb-1 .pb-md-0 
h2> .text-center ~ | div> .col-md~4 .pb-1 .pb-md-0 
hr> v [giv> card 
—_ _— 


5 Select the headline at the bottom of the layout. 
In the DOM panel, select and delete the two hr elements. 


If you inspect the DOM panel, you will find one more hr element near the 
footer. Let’s remove this one too. 


6 Select the hr element in the DOM panel and delete it. 
All the hr elements have been removed. 


When examining the DOM panel, you have seen another borderline semantic 
issue. The headings for each of the content sections are sitting outside the wrap- 
per containing the content that they introduce. 


Although no visitor would see or notice this, having the headlines inside the 
wrappers would be more semantically correct. It will also pay dividends if you 
need to move or delete these sections. 
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7 Select the headline above the card-based section. 
The h2 element is highlighted in the DOM panel. Note the div. container 
element directly below the heading. If the element is collapsed, you can expand 
it to reveal its structure. 
8 If necessary, click the expand icon > for div.container. 
DOM Assets Snippets cs DOM Assets Snippets Es 
> [Bw cola > [EXD col-4 ; 
> [BW col-4 > [diy .col-4 
v [diy .col-4 v col-4 
» [AD row » [aD «row 
> [ai col-2 > [diy .col-2 
v [div> .col-ig-6 .col-10 mi-1 v [a> col-lg-6 .col-10 .ml-1 
+ [RD text-center + [R2> text-center 


errineN 


div 

, Container 

h2> .text-center 

div i 
[div container 
(ay » container .bg~dark .p~4 


footery, 


REY container 
N/ {a> ow .text-center 
> [div> .col-md-4 .pb-1 .pb-md-0 
div 
v .col-md-4 .pb-1 .pb-md-0 


w Panes raed 


> .col-md-4 .pb-1 pb-md-0 


The structure of div.container is revealed. The DOM panel enables you to 
add, edit, delete, or rearrange the HTML elements in the document. Dragging 
elements can be difficult at first. If you make a mistake, just choose Edit > Undo 
and try again. 


9 Drag the h2 under the div.container element. 


DOM Assets Ssippets DOM Assein Snippets DOM Assets Snippets 
> [GRY cota > [dvd cola » [BW row 

> [Bivy cots > [a> coins > [div cola 

v [aid Of vi di cola > {diy col~d 

yy (di> Ow - {a> Ow SF [a> col-4 

> [did cot 2 > [Sivy cat-2 Sd {a> FOW 

» [ED .coi-tg-6 col-10 mt-1 » [B® .col-tg-6 .col-10 .mi-1 > (div .coi-2 
hg {fh ~ {ax col-tg-6 .cal-10 .mi-} 
5 ee (he) seextrcenter + [RD -rext-center ha 
a (i> container ae div> container Nee {div comainer 
v [GD -row text-center ~ [GD row tekt-center + [RD text-center 


> [div 


y .col-md-4 .pb-1 .pb-mdeG > [div col-md-4 .pb-1 .pb-md-0 ¥ Ldv> crow .text-center 
> [8D col-md-4 .pb-2 .pb-md-0 > [GD col-md-4 .pb-1 .pb-md-o > [SV .col-md-~4 .pb-1 spb-md-0 
v [E> col-md-4 .pb-1 .pb-md-0 ¥ [dV .col-md-4 .pb-1 .pb-md-0 > FAR col-md-4 .pb-1 pb-md-0 


» Tip: Examine the 
structure carefully to 
make sure the h2 is 
positioned correctly. 
You may need to drag 
the element several 
times before you get it 
right. 


a (ABN pant ~ FARIN catia dA @hod atom d it 


As you move an element, you will see a green line. Make sure the line appears 
below div.container but above div. row. text-center. When you're done, 
the headline will be under div. container but above the content placeholders. 


10 Repeat steps 6—9 for the second headline. 


Both headlines are now part of the . container elements in their respective 
sections. 


11 Choose Save All. 
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Up to this point, you’ve worked on the visible content of the layout. But before you 
can consider the layout complete, you'll have to create some invisible content too. 


Although few users will ever see it, it could prove very important to the success of 
your website. 


Inserting metadata 


A well-designed webpage includes several important components that users may 
never see. One such item is the metadata that is often added to the <head> section 
of each page. Metadata is descriptive information about your webpage or its con- 
tents that is often used by other applications, such as a browser or a search engine. 


Adding metadata—such as the page title—is not only a good practice but also 

vital to your ranking and presence in the various search engines. Each title should 
reflect the specific content or purpose of the page. But many designers also append 
the name of the company or organization to help build more corporate or orga- 
nizational awareness. By adding a title placeholder with the company name in the 
template, you will save time typing it in each child page later. 


1 Ifnecessary, open mylayout.html in Live view. 


2 Choose Window > Properties, if necessary. 
Dock the panel to the bottom of the document window. 


3 Inthe Document Title field of the Property inspector, select the placeholder text » Tip: The Document 


Bootstrap eCommerce Page Template. Title field is available in 
the Property inspector 
Many search engines use the page title in their search results. If you don’t sup- in all views. 


ply one, the search engine will pick one of its own. Let’s replace the generic 
placeholder with one geared for this website. 


4 Type Insert Title Here - Favorite City Tour to replace the text. 
Press Enter/Return to complete the title. 


Properties Properties 


pow wer . oo 
Format None v Class (navbar-brand v) es Format None v Class (navbar-brand >) ‘eb 
1D None ¥ Unk 4 - IDF None > link 4 
Document Title L Bootstrap. | Document Tite Insert Title Here ~ Favorite City Tour 
aarrses az 


Along with the title, the other piece of metadata that usually appears in search 
results is the page description. A description is a type of page summary that, 
in the past, succinctly described the contents in 160 characters or less. At the 
end of 2017, Google increased the size of the acceptable meta description to 
320 characters. 


Over the years, web developers have tried to drive more traffic to their sites 
by writing misleading titles and descriptions or even outright lies. But be 
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forewarned that search engines have become wise to such tactics and will actu- 
ally demote or even blacklist sites that use them. 


To achieve the highest ranking with the search engines, make the description of 
the page as accurate as possible. Try to avoid using terms and vocabulary that 
do not appear in the content. In many cases, the contents of the title and the 
description metadata will appear verbatim in the results page of a search. 


5 Choose Insert > HTML > Description. 
An empty Description dialog appears. 
6 Type Favorite City Tour - add description here. Click OK. 


Description Description 


Description: Description: 


| C Gancel_) : ' | Favorite City Tour - add description here ( Cancel ) 
Cteip ) B y C Help _) 


a 
J 


AS 


: 


IML 


Dreamweaver has added the two metadata elements to the page. 


7 Ifmecessary, switch to Code view. 
Locate the meta description in the <head> section. 


‘ 


x about-us.htral” * favorite-temp.dwt 


bootstrap-4.3.1.js 


bootstrap-4.3.1.css favorite-styles.css jquery-3.3.1.min.js © popper 


<!DOCTYPE html> 
2¥ <htmi lang="en"> 
3% <head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 


6 <meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Insert Title Here - Favorite City Tour </title> 
<!-- Bootstrap --> 


<link href="../css/bootstrap-4.3.1.css" rel="stylesheet"> 
<link href="../favorite-styles.css" rel="stylesheet" type="text/css"> 

iY <meta name="description" content="Favorite City Tour - add description here"> 
</head> 


The meta description should be visible, around line 11. 


8 Choose File > Save. 


The layout is almost ready to convert to a template. Before you use your template to 
create new pages, you should validate the code you created. 
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Validating HTML code 


The goal whenever you create a webpage is to create code that will work flawlessly 
in all modern browsers. As you made major modifications in the sample layout, 
there’s always a possibility that you may accidentally break an element or create 
invalid markup. These changes could have ramifications for the quality of the code 
or for whether it displays in the browser effectively. 


Before you use this page as your project template, you should check to make sure 
the code is correctly structured and that it meets current web standards. 


1 Ifmecessary, open mylayout.html in Dreamweaver in Live view. 


2 Choose File > Validate > Current Document (W3C). 


@ Dreamweaver | File | Edit View Insert Tools Find Site Window Help idow Help C@MPMewta’s © 3} F424 
@ee boca ae Code Split Live ¥ 
* mylayouthim! * — Open Recent pS 
hy) ‘Source Code bo Close sew javery-3.3.1.min.js popper.min.js popper.min,js bootstrap-4.3,1.js 


;, cose ail 
Save 
me . % jer Save As.., 
= : <a Save All 
Save All Related Files 


Save-as Template. 


. £ 
> 0 Gt 
Bid 


«EA 


WC Validator Notification 


Attach Style Sheet... 
Import 
Export 


Print Code... 


Real-time Preview 


Dreamweaver will now send your document to the W3C service for validation, 


What's W3C?_ Terms and Conditions 


't show this dialog again. 


Validate 


_ Current Document (W3C) 


ee 


Design Notes... eae » Raab a Tar 


A W3C Validator Notification dialog appears, indicating that your file will be 
uploaded to an online validator service provided by the W3C. Before clicking 
OK, make sure you have a live internet connection. 


3 Click OK to upload the file for validation. 


x << 
~~ Validation = 
> File/URL Line Description 
he &) mylayout.html! {htm15] arg 
@ 


Current document validation complete [ 0 Errors, 0 Warnings, 0 Hidden ] 


After a few moments, you receive a report listing any errors in your layout. If you 
followed the instructions in the lessons correctly, there should be no errors. 
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Congratulations! You created a workable basic page layout for your project tem- 
plate and learned how to insert additional components, placeholder text, and 
headings. You also modified existing CSS formatting and created new rules, and 
validated the HTML code successfully. Now it’s time to learn how to create a 


Dreamweaver template. 


Working with editable regions 


When you create a template, Dreamweaver treats all the existing content as part of 
the master design. Child pages created from the template would be exact dupli- 
cates, and all the content would be locked and uneditable. 


This setup is great for repetitive features of the design, such as the navigation com- 
ponents, logos, copyright, contact information, and so on, but the downside is that 
it stops you from adding unique content to each child page. You get around this 
barrier by defining editable regions in the template. 


When you save a file as a template, Dreamweaver creates two editable regions auto- 
matically: one for the <title> element and another for metadata or scripts that 
need to be loaded in the <head> section of the page. Any other editable regions you 
have to create yourself. 


First, give some thought to which areas of the page should be part of the locked 
template and how they will be used. In this layout, the center portion of the page 
contains an image carousel and two sample content sections. 


Image carousel 


The image carousel shows a series of dynamically rotating images and text. It was 
not in the original design mockup or page wireframes, but it was a feature of the 
Bootstrap template selected. The large animated images offer a great way to display 
travel photos and market various tour products, but you probably don’t want to use 
it on every page of the site and when you do, you probably would want to custom- 
ize the images for the page content. When a template component will be needed on 
only a few pages, consider making it an optional region. 


Card-based section 


The card-based section features 400 x 200 pixel placeholder images, headings, 
descriptive text, and a button. This section will be ideal for listing individual tour 
products with promotional blurbs. The button can be linked to pages giving more 
information about the products. 
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List-based section 


The list-based section features a smaller 100 x 125 image placeholder and larger 
text blurb. The portrait image orientation is more appropriate for headshots than 
for travel photos. You can use it for the biographies of the staff and tour guides. 


The two existing content sections are geared for selling and marketing products. 
But there’s no place to insert tracks of descriptive or explanatory text. The template 
is begging for a text-based section. 


Inserting a new Bootstrap element 


If you look around the internet, you will see that most product-based sites usually 
introduce content with one or more paragraphs of text. Let’s add a new section 
under the carousel that can be used for that purpose. The easiest way to insert new 
HTML structures is using the DOM panel. 


1 Switch to Live view, if necessary. 
In the layout, select the text Get a Quote. 


In the DOM panel, the text element is highlighted. When a child element is 
selected, the entire structure that it belongs to is revealed. The new text-based 
content section will be a peer to this element’s main parent. Can you identify 
it? When adding a peer element, it’s a good idea to collapse the child structure 
completely. 


2 Inthe DOM panel, click the Collapse icon Y on div.container. 


j DOM Asse 


[VY container .mt-3 
. Ak AGMQINGE 
Ny [iD .com 
v [BE col-4 > 
» [gD row > (divy 
» [GD .col-2 e 5 
[im .rounded-circle ; > 
- (siz> coleig~6 col-10 .imt-1 —y 


When the selected element is collapsed, you can see the other content sections, 
which are also based on div. container. 
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3 Click the Add Element icon *. 
Select After in the pop-up menu. 


DOM Assets Snippets | 


> [heady | 
- (Bay | 
| 
i 
v navbar .navbar~expand-ig .navbar-dark .bg-dark 
> container 
> | header> row 
> {div> container .mt-3 
Ht > container 


Insert Before — tainer 


s tainer 
Insert Child : 
@xt-center 
Wrap Tag ‘ow 
semen 


A new div element is added to the structure. Let’s match the structure of the 


other content sections. 


4 Press Tab to move the cursor into the Class/ID field. 
Type .container and press Enter/Return to complete the new element. 


> Liv container amt-3 > .container .mt-3 
> bey container : > [div COORERES 
Sees + div ‘| container 
ine t container 
> [avy conMiner > contamer , . 
i - 
© | div> .container * v [a> container .container-nui 
[F2> text-center h2> .text-center 


Dreamweaver creates placeholder text with a new div element. There’s no tag 
on the text yet. You can use it to create the heading for the new text section. 


5 In the layout, select the placeholder text. 
Type INSERT HEADLINE HERE 
Select Heading 2 from the Format dropdown menu in the Property inspector. 


a i nn nn nn nn nn nn a ng = =  _ ---e 


GetaQuocte = = ~~~. Booka Tour 


None 
container k Paragraph 
verties aS Heading 1 oC Co 
ue Format v Heading 2 Class (container = 4 Title 
C85 1D Heading 3 Link Target 


‘The new placeholder text is now tagged as an h2 element. To center the heading 
like the others, you can use the same Bootstrap class used in the other sections. 
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6 Inthe DOM panel, insert the cursor in the Class/ID field for the h2 element. 


7 Type .text-center and press Enter/Return. 


> {div> container 
v container 


> [am Nontainer 
vv [div container 


> container 
- container 

{ -text-center 
> {divy container k 
v -container 


The heading element is complete; now you need to create the structure to hold the 


text content. It will consist of two div elements and be a sibling of the heading. 


8 Click the Add Element icon *h. 


Select After in the pop-up menu. 


A new div appears below the h2 element. 


9 Press Tab and type . row and press Enter/Return. 


DOM Assets Snippets 7 OOM Assets Snippets #& DOM Assets  Srppets Ed 
> [fad > (Red) > (heady 
- ea » (edip < 


~ [Bid .navbar navbar-expand-ig navbar-dark bg-dark 
> [BR container 

> [Reader cow 

> [BRD containar mt-3 

> cy? container 


» [a> conti 


Insert Before — xsiner 


: ainer 
Insert Child 

ext-~center 
Wrap Tag sow 


~ [Gav> navbar navbar-expand-lg navenr-dark .0g-dark 
> [BR container 
> 3 eadECY, tow 


Y LAav> .navbar navbar expand-lg navbye-dark b9-dark 
> [BW comainer 


> (BEBE som 


> [BR container mt-3 ; Alax-sm-row aimee med 
} 
> [SXy container f flex-sm-row-...  giner 
s Slex-xi~ 6 
¥ [BaD container é flex~xi-grow~0 ainer 
Aex-xt-grow=t 
i > Rext~conter flex=xt-row xtecenter 
E flex-xd-row-r... ron 
> [died <drainer form-row ainer® 
> [dy container SON ainer 
* spinners: ee 
> avy comainer .69-dark .p-4 P sh Biner .bg-dark .p-4 
Coos BSL LNs Andee 


The new div is the outer wrapper of the new text section. As before, Dream- 
weaver has populated it with placeholder text. You can use the placeholder text 


to create the inner Bootstrap container. 


10 Select the placeholder text. 
Type Insert content here. 


Choose Paragraph from the Format menu in the Property inspector. 


(4 GetaQuote | ~{ @2)) Book a Tour 
= so atin ina cipal es t 
Bone INSERT HEADLII 
Paragraph ¥ 
Heading 1 
Heading 2 Seer PN 
Heading 3 INSERT HEADLII 
Heading 5 
body diy container @ Heading 6 3-12 p 
Properties 7 Preformatted ee - 
Format Paragraph v _— Class (col-Ig-12,__) TE JE £5 2 Title 
Link S OB Target 


A p element appears in the DOM panel. 
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11 Click the Add Element icon . 
Select Wrap Tag in the pop-up menu. 
Add the class .col-1g-12 to the new div element. 


Y [aiv> container v [div> container 
[a2 text-center [h2> text-center 
» [div> OW ss div> crow ie 
oie Bee a = eee ee ae = . a a : i se a pee, div col-ig-12 . 5 


In: Ore tines [> coe A as 


Insert After stalner > {div , container 
Insert Child S 
itainer .bg-dark .p-4 > [div> container 
f > 


[diy container .bg-dark .p-4 
eee 


aon 


The new text content section is complete. 
12 Save all files. 


Now you are ready to add the editable regions to the layout. 


Inserting an editable region 


Since the image carousel will not appear on every page, you will add it to an 
optional editable region. The other three content sections will be inserted into a 
single editable region. By putting all three into one region, you can create a child 
page and simply delete any sections not appropriate for the content on that page. 


1 Ifnecessary, open mylayout.html from the lesson07 folder in Live view. 
Make sure the document window is at least 1200 pixels in width. 


All three content sections will be added to your editable region, but there’s a 
bug in Dreamweaver that will prevent you from applying the editable region to 
more than one selected element at a time. A simple workaround is to wrap the 
three content sections in a new element first and then apply the editable region 
to that. 


2 Select the heading of the new text section. 


Or ote { § Book a Tour SupporedContent collapse 1a 
en ne: ee a oe 5 - ; 5 
a ___INSERT HEAD’ | Lope 
| Insert content here. -— 2 rat > (BQ) container 
: “J FED container 
INSERT HE/ Decir 
brood tne ae ee _ PENENG ey 
! > favs, container 


The heading of the text content section is selected in the DOM panel. 
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3 Select the parent of the h2 element. 
Hold the Shift key and select the other two sections. 


DOM Assets Saippets DOM Assets Snippets DOM Assets Snippets 
> (div container mt-3 > [aM container Mt=3 > (4 container smt-3 
> (div) container > [8i¥> container > [div .container 
v container h aw ontainer BS on 
2 LR teenter ae eae te {h2> text-center (h2> 
> [div cow > [BY row 
> (di) container > [ai¥> container 
> [BMD container > (SY container r S ontainer ney 
> [div comainer -bg-dark .p-4 > (div) container .og-dark .p-4 > [BN container dbg-dark .p-4 : 


All three sections are now selected. 


4 Click the Add Element icon *. 
Select Wrap in the pop-up menu. 
Add the class .wrapper 


container .mt-3 


> {div container .mt-3 


container 
> [div>, .containe® 
_ > [a> container 
f conned el 
f > [div container 


The three content elements are now wrapped by a single div element. They are 
ready to be added to an editable region. 


5 Switch to Design view. 


® Note: As of this writing, the template workflow works only in Design and Code views. You 
will not be able to perform any of the following tasks in Live view. 


6 If necessary, select div.wrapper in the DOM panel. 
Choose Insert > Template > Editable Region. 


View Tools Find Site Window Help _ : @O Fz wg) ar. O Sun 1:57AM JimMaivald Q @ i= 
Div Design Y Standard + ty 
image YE! < La 
Paragraph Files CC Libraries insert CSS Designer =) 

njs | Heading Y ms ~ 
Table X#T - ba ® Blessono7 ie 
Figure : | ye) 

| _Unordered List : 
Ordered List: i 
/ List Itere 


eee wines PAVOFtES 


2 


Recent Snippets 


~ Lnav> navbar .navbar~expand-lg .navbar-dark .bg-da 
P noe > [i> container 
g 
bs 
} LE a ant > [Reader row 


~ Template > Make Template i > [Giv> container .me-3 
__ Make Nested Template f ) container 
Editable Region BEM (1224x410 » [eh + v [GD wrapper 
- Optional Region EEE ERT REAR OE: > [8 comainer 


f Gi 
Repeating Region f ® >» [BND container 
B 


Editable Optional Region > [BX comainer 
Repeating Table s ge : > [GS container .bg-dark .p-4 
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Editable regions can be added only to a Dreamweaver template. A dialog 
appears reporting that the program will convert the document to a template 


when you save the file. 


Ten GlickeOK 


Dreamweaver 


Dreamweaver will automatically convert this 
document to a template. 


[} Don't show me this message 
again 


The New Editable Region dialog appears, providing a field to name the editable 


region. 


8 Enter MainContent in the Name field. 


__NewEditable Region 


Name: [MainContent Ceuta) 
Cancel ) 
This region will be editable in (ea 
: { Help ) 

documents based on this template. 


\ 


Each editable region must have a unique name, but no other special conven- 
tions apply. However, keeping the name short and descriptive is a good practice. 
The name is used solely within Dreamweaver and has no other bearing on the 
HTML code. 


Se Chick OK: 


* mylayout.htmi* 


Source Code bootstrap-4.3.1.css favorite-styles.css jquery-3.3.1.minjs popper.min.js bootstrap-4.3.1.js 


~ 


OO ee ee - 


INSERT HEADLINE 


Insert content here. 


INSERT HEADLINE 


In Design view, you will see the new region name in a blue tab above the designated 
area, identifying it as an editable region. In Live view, the tabs appear orange in 
child pages. The editable region will encapsulate the div.wrapper element and all 
the content sections within it. 


Before you save the file, let’s add the optional editable region around the carousel. 
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Inserting an optional editable region 


Optional editable regions enable you to mark content that you want in some pages 
but not all pages within the site. The first step is to select the carousel. 


1 Click anywhere on the carousel component in the document window. 


The carousel is a very complex Bootstrap component composed of several con- 
tainers and content elements. It’s important that you select the entire structure 
before applying the option editable region. 


2 Select the div.container.mt-3 tag selector. 


carousel-inner diy > .carousel-item active ime d-block w- 100 


If you find the DOM panel easier to use, feel free to use it to select the elements 
instead. 


3 Choose Insert > Template > Editable Optional Region. 
The dialog appears again, indicating that the file will be saved as a template. 
4 Click OK. 


The New Optional Region dialog appears. At the time of this writing, a bug in 
Dreamweaver may prevent you from changing the default name displayed in 
the dialog. If you experience this bug, you can get around it by first clicking the 
Advanced tab in the dialog and then switching back to the Basic tab. 


5 Click the Advanced tab. 
Click the Basic tab. 


The name should be editable now. 


6 Type MainCarousel and click OK. 


Basic Advanced 


Source Code bootstrap~4.3.1l.css favorite-styles.css jquery- 


= New Optional Region == x mylayout.html® 


Name [ MainCarousel ] 


Show by default 


The two editable regions are in place. 
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7 Choose File > Save. 
The Save As Template dialog appears. 


8 Enter Favorite City Tour template in the Description field. 


: Save As Template 


Site: lesson07 v 
isti : Cancel ) 
| Existing templates: (no templates) ( / 


Description: Favorite City Tour template 


Sp SS a Race ence ET 


» Tip: Adding the 9 Type favorite-temp in the Save As field. 
suffix “temp” to the file- Click Save. 
name is not a require- ; : : 
ment, but it helps to An untitled dialog appears, asking whether you want to update links. 
visually distinguish this me, ame 
file from others in the _ Save As Template — - 2 
site folder display. See aa 
Site: lesson07 Be ys Update Links? 
Existing templates: (no templates) C Cancel) 


(re _) 


Description: Favorite City Tour template 


Save as: favorite-temp til C Help _) 


Templates are stored in their own folder, Templates, which Dreamweaver auto- 
matically creates at the site root level. 


10 Click Yes to update the links. 


Since the template is saved in a subfolder, updating the links in the code is nec- 
essary so that they will continue to work properly when you create child pages 
later. Dreamweaver automatically resolves and rewrites links as necessary when 
you save files anywhere in the site. 


Although the page still looks exactly the same, you can identify that it’s a tem- 


plate by the file extension displayed in the document tab: .dwt, which stands for 
Dreamweaver template. 
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Before we finish the template there’s a small error we need to deal with in the 
<head> section. When you saved the layout as a template, the <title> and 
meta description should have been inserted into their own editable regions. 
As of this writing, Dreamweaver has a bug that causes it to miss the meta 
description. 


11 Switch to Code view and locate the meta description placeholder, around 
line 14. 


If the meta description is outside the editable region, you won't be able to 
change it on any child pages made from the template. 


12 Select the entire <meta> element and drag it between the tags 
<!-- TemplateBeginEditable name="head" --> and 
<!-- TemplateEndEditable -->. 


<link href="../favorite-styles.css" rel="stylesheet" type 
5 <!-- TemplateParam name="MainCarousel" type="boo 
14¥ J<meta name="description" content="Favorite City To 
<!-- TemplateBeginEditable name="head" --> 
<!-- TemplateEndEditable --> 
</head> 


<!-- TemplateBeginEditable name="head" --> 


<!-- TemplateEndEditable --> 
</head> 


Now the template is complete and you're ready to éreate some child pages. 
13 Save and close all files. 


A Dreamweaver template is dynamic, meaning that the program maintains a con- 
nection to all pages within the site that are derived from the template. Whenever 
you add or change content within the dynamic regions of the template and save it, 
Dreamweaver passes those changes to all the child pages automatically, keeping 
them up to date. 


Working with child pages 

Child pages are the raison détre for Dreamweaver templates. Once a child page 

has been created from a template, only the content within the editable regions can 
be modified in the child page. The rest of the page remains locked within Dream- 
weaver. It’s important to remember that this behavior is supported only within 
Dreamweaver and a few other HTML editors. Be aware that if you open the page in 
a text editor, such as Notepad or TextEdit, the code is fully editable. 


Creating a new page 

The decision to use Dreamweaver templates for a site should be made at the begin- 
ning of the design process so that all the pages in the site can be made as child 
pages of the template. In fact, that was the purpose of the layout you've built up to 
this point: to create the basic structure of your site template. 
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1 Launch Dreamweaver (2020 release) or later, if necessary. 

One way to access site templates is using the New Document dialog. 
2 Choose File > New, or press Ctrl+N/Cmd+N. 
The New Document dialog appears. 
In the New Document dialog, select the Site Templates option. 
Select lesson07 in the Site list, if necessary. 


Select favorite-temp in the Template For Site “lesson07” list. 


aA u SF WwW 


Select the Update Page When Template Changes option, if necessary. 


New Document 


Site: Template for Site “lesson0?” 
New ocak & Accordion test favorite-temp 
& AmazingRibs Media 
corca & Amazingribs- MAMP 
ER} Starter Templates & Bootstrap-test 
. oe ‘ & Craig Goldwyn 
Site Templates && FT-template 
ie SSeS & Jewelers Association 
& lessond1 
@ lessond2 
& lesson03 
@& lesson04 
@ lessonos 
& lesson06 
& lesson07 


Favorite City Tour template 


ee page when template changes 


7 Click Create. 
Dreamweaver creates a new page based on the template. 


8 Ifnecessary, switch to Design view. 


Code Split Design v 


strap~4.3.1js y. 


Template:favorite-temp 


Typically, Dreamweaver defaults to the last document view (Code, Design, or 
Live) that you were using for the new document. In Design view, you will see 
the name of the template file displayed in the upper-right corner of the docu- 
ment window. Before modifying the page, you should save it. 


9 Choose File > Save. 


The Save As dialog appears. 
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10 In the Save As dialog, navigate to the site root folder. > Tip: The Save As 


oe aopsees = oe Se ae a ee ee dialog provides a handy 
a 8. oo Co — button to take you to 
| Yc [2bout-ush ts a | | the site root with a 


single click. Feel free to 


Tags: nas : 
use It In any exercise, 
| sul EF ™ lesson07 CE4 Q Sea | as needed. 
| 
Name v _ Date Modified Size Kind | 
| » [8 Templates Today, 3:01 AM -- Folder 
| » MM resources 10/7/19, 3:10 PM -- Folder | 
| > Wis 10/2/19, 8:18 PM ~ Folder | 
|» images 40/10/19, 8:30 AM -- Folder 
| Unicode Normalization Form: C (Canonical Decomposition, followed by Canonical Compos.., 
} 
{ 

Include Unicode Signature (BOM) 

Site Root @ i 

New Folder Cancel 


11 Name the file about-us.html and click Save. 


The child page has been created. When you save the document in the site root 
folder, Dreamweaver updates all links and references to/external files. The template 
makes it easy to add new content. 


Adding content to child pages 
When you create a page from a template, only the editable regions can be modified. 
1 Open about-us.html in Design view, if necessary. 


You'll find that many of the features and functionality of templates work prop- 
erly only in Design or Code view, although you should be able to add or edit 
content in the editable regions from Live view. 


2 Position the cursor over each area of the page. Observe the cursor icon. @ Warning: If you 
open a template ina 
text editor, all the code 
is editable, including 
the code for the noned- 
itable regions of the 
page. 
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When the cursor moves over certain areas of the page, such as the horizontal 
menu, header, and footer, the Locked icon © appears. These areas are unedit- 
able regions that are locked and cannot be modified within the child page inside 
Dreamweaver. Other areas, such as MainCarousel and MainContent, can be 


changed. 


3 Select the first placeholder text INSERT HEADLINE HERE. 
Type ABOUT FAVORITE CITY TOUR to replace the text. 


ABOUT FAVORITE CITY TOUR ' 


INSERT HEADLINE HERE 


4 Inthe Files panel, double-click aboutus-text.rtf in the lesson07 resources folder 
to open the file. 


Dreamweaver opens only simple, text-based file formats, such as .html, .css, .txt, 
.xml, .xslt, and a few others. When Dreamweaver can’t open the file, it passes 
the file to a compatible program, such as Microsoft Word, Excel, WordPad, 
TextEdit, and so on. The file contains content for the text-based content section. 


@ Note: Feel free to 5 Press Ctrl+A/Cmd+A to select all the text. 

use any method you Press Ctrl+C/Cmd+C or choose Edit > Copy to copy the text. 
know to select and copy 

the content. ‘eT it /Format View Window Help 


Paste 3 BV | ey : 7 
Pate and Match Syle COV ie our motto, ‘its the way we do business. Here 


Attach Files... 

Add Link... 

Find ae 
Spelling and Grammar 
Substitutions 
Transformations 

Speech 


Start Dictation... 


rence. With our 100% 
atisfied customers. Many 
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6 Switch back to Dreamweaver. @ Dreamweaver File [=r 


eee Undo eZ 


7 Click anywhere in the placeholder text Insert 


Redo BY | 
* about-us.htm!* i ; 
content here. Select the p tag selector. Cut 3X = 
bootstré Copy 980 SUSIE OMI A 


8 Press Ctrl+V/Cmd+V to paste the text, or 


| 
A | Paste Special... DEV 
choose Edit > Paste. 


View Insert Tools Find Site Windo} 


eee BV ABO UT 


Select All A I 
The placeholder text is replaced by the new eaten iso el 
[oeenennneneeeanneninns se SeleGL ChiiG 36] 
content. | INICE 
9 Save the file. 
X about-us.hrmt* = 
bootstrap-4.3_ Less favorite-styles.css jquery-3,3. Lminjs popper.min.js bootstran~4.3.Ljs > ¢ 


ABOUT FAVORITE CITY TOUR 


“Travel with a Difference” is not just our motto, it’s the way we do business. Here at Favorite City Tour we take travel seriously. Untike other tour companies who 
have guides who lead tours of several cities, each of our guides has one city for which they specialize, Our tour guides and leaders have lived in their city for fiv 
years or more. They know every neighborhood and attraction like the back of their hands. We live and breathe a city. and so will you, 


F 
| 
| 
| 
| 
| 


| Think of a city you've always wanted to visit. Now imagine you had a friend living there. That’s Favorite City Tour. We're not like other agencies who tour seven citi 
in seven days. We tour one city for an entire week. By the end of the week you will call that city home. You will know more about it than many lifelong residents, 


For 25 years we have been leading tours with a difference. With our 100% money back guarantee we can boast thousands of satisfied customers. Many have 
toured with us year after year. Do you have a favorite city? You've tried the rest. Why not try the best. 


Once the visible content has been added to a page, you can deal with the invisible 
content, or metadata. 


Adding metadata to a child page 


Earlier, you added metadata placeholders to the template. This metadata should be 
updated before any page can be considered complete. 


1 Open the Properties panel, if necessary. 
2 Inthe Title field, select the placeholder text /nsert title here. 


3 Type About Favorite City Tour and press Enter/Return. 


Properties 


Properties 
Sc aN 
j yi Format None v Format None a Class Cone aS y) I 
a | Link 
fh css 1D None ¥ BR css D None » 4 
Document Title [ (HEETREAUEIE - Favorite City Tour aa ( Document Title [About Favorite City Tour ~ Favorite City 1} ( 


Although you can’t see the title anywhere in the layout, it has been updated 
within the code. Next you'll update the meta description placeholder. Although 
you can always edit it in Code view, the DOM panel offers another method. 
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4 Inthe DOM panel, expand the head section. 
Expand the mmtinstance editable element. 


DOM Assets Snippets ba i DOM Assets Snippets ps 
¥ 
: % 
; si 
> ED 
v i 
: 
> [navy navbar .navbar-expand-lg .navbar-dark .bg-dark : meta> ’ 
Li 
> [header row i meta> 
£ . 
mtinstanceeditable : v [mmtinstance:editable 
> Lrmmt > > 
> container 
i - 
> | mmtinstance:editable t link 
ee / 
i - 
> [div>, container .bg~dark .p-4 i link 
i » mmtinstance:editable > 
= Se 
3 P 
~ [body 


You should see the meta description inside the expanded element. 


5 Click the meta element in the DOM panel. 


ECO e | ff Se es 


Properties 


mintinstance Hleinstance head mrntinstance editable 


mintinstance param 
~ | mmtinstance:editable % 


(=) Description: Favorite City Tour - add description here 


© Note: You may have to click the meta element more than once to get the content to display 
in the Property inspector. 


The Property inspector displays the content of the meta description. 


6 Select the text add description here and type 
For 25 years Favorite City Tour has been showing people how to travel with 
a difference. It’s not just a motto, it’s a way of life. 


Properties 


Properties 


(=) Description Favorite City Tour -E 


Description) Favorite City Tour — For 25 years Favorite City Tour has been 
showing people how to travel with a difference, It’s not just a 


motto, it's a way of life. 


7 Save the file. 


You have updated various placeholders in the child page. In the next exercise, you 
will learn what happens when you update a template. 


LESSON 7 Working with Templates 


Updating a template 


Templates can automatically update any child page made from that template. 
But only areas outside the editable regions will be updated. Let’s make some 
changes to editable and noneditable sections to demonstrate how Dreamweaver 
templates work. 


1 In the Files panel, double-click favorite-temp.dwt to open it. 
Make sure the document window is at least 1200 pixels wide. 


ti 


Files CC Libraries Insert CSS Designer 
a } 5 lesson07 Define Servers 
Pp 
Local Files T 
~ © Site - lesson07 (NewRoad:MacProjects:Peachpit:DWCC2020:webs:DWCC20... 

“ =) Templates 

</> favorite temp.dwt 
~ © resources 
[S aboutus-text.rtf 


</> mylayout.htm! 
> Ba ie 


2 Switch to Design view. 


3 Inthe navigation menu, select the text Home. 
Type Home Page to replace the text. 


4 Select the text Events. 
Type Calendar to replace the text. 


* about-us.bumi® ™ favorite-temp.dwt® 


Source Code bootstrap-4.3.1.css favorite-styles.css jquery-3.3.1.minjs popper.min.js bootstrap-4.3.1.js 


Favorite City Tour 
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5 Select and replace the text Insert with the word Add wherever it appears in the 


MainContent editable region. 


x about-us.html* ™ favorite-temp.dwt* 


‘Source Code ~ bootstrap~-4.3.1.css favorite~styles.css jquery-3.3.1.minjs popper.min.js bootstrap~4.3.1.js 


les ADD HEADLINE HERE 


Add content here. 


ADD HEADLINE HERE 
ee 


6 Switch to Live view. 


* about-us.html? ™* favorite-temp.dwt* 


Source Code bootstrap~4.3.1L.css favorite-styles.css jquery-3.3.1.min.js popper.min.js bootstrap-4.3.1.js 


You can now Clearly see the changes to the menu and content areas. 


7 Save the file. 


ADD HEADLINE HERE 


ADD HEADLINE HERE 


@ Update Template Files 


-. Update all files based on this template? 
about-us.html 


The Update Template Files dialog appears. The filename about-us.html appears 
in the update list. This dialog will list all files based on the template. 
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8 Click Update. The Update Pages dialog appears. 


9 If necessary, select the Show Log option. 


. __ Update Pages 
Look in: Files That Use... : favorite-temp, about-us Done 
Update: {_] Library items Close 
Templates iielp +») 
ee! log Done 


Updating NewRoad:MacProjects:Peachpit:DWCC2020:webs:DWCC2020:Lessons:lesson07: 
updated about-us.html 
Done. 
files examined: 1 
files updated: 1 
files which could not be updated: 0 
total time: (0:00:00) 


A window displays a report that lists which pages were successfully updated 
and which ones were not. It should report that about-us.html was updated 
successfully. 


10 Close the Update Pages dialog. 


11 Switch to about-us.html by clicking the document tab. 
Switch to Live view and observe the page and note any changes. 


x about-us.hemiy * favorite-temp.dwt 


g sire Dootstrap=4/3.Ucss favorite-styles.css jquery-3.3.1.min.js popper.minJjs bootstrap-4.3,1)5 


© Note: The Update 
Pages function can 
sometimes take a long 
time to complete. If 
your update freezes, the 
dialog provides a Stop 
button with which you 
can exit the process 
before it finishes. 


. snvw more 


~v ve money back guarantee we can boast thousands of satisfied customers. 


, vv save a favorite city? You've tried the rest. Why not try the best. 


_ INSERT HEADLINE HERE 


400 x 200 400 x 200 400 x 
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)® Tip: If an open page 
has been changed 
during the update, it 
will be updated but not 
saved by Dreamweaver 
and show an asterisk 
by its name in the 
document tab. 


)» Tip: Always use 

the Save All command 
whenever you have 
multiple files open 
that may have been 
updated by a template. 
In most cases, it’s better 
to update a template 
when the child pages 
are all closed. That way, 
the pages are saved 
automatically. 


© Note: Dreamweaver 
added a limited auto- 
backup feature in a 
previous version. If the 
program crashes, some 
or all of the changes 
you have made may be 
preserved. 


The changes made to the horizontal menu in the template are reflected in this 
file, but the changes to the main content sections were ignored. The content you 


added remains unaltered. 


As you can see, you can safely make changes and add content to the editable 
regions without worrying that the template will delete all your hard work. At 
the same time, the boilerplate elements of the header, footer, and horizontal 
menu all remain consistently formatted and up to date, based on the status of 
the template. 


12 Switch to favorite-temp.dwt. 
13 Switch to Design view. 


14 Delete the word Page from the Home Page link in the navigation menu. 
Change the word Calendar back to Events. 


15 Save the template and update the related files. 


16 Click the document tab for about-us.html. 
Observe the page and note any changes. 


The horizontal menu has been restored to its previous content. As you can see, 
Dreamweaver even updates linked documents that are open at the time. The 
only concern is that some changes have not been saved. Note that the document 
tab shows an asterisk, which means the file has been changed but not saved. 


If Dreamweaver or your computer were to crash at this moment, all the changes 
you made would be lost; you would have to update the page manually or wait 
until the next time you make changes to the template to take advantage of the 
automatic update feature. 


17 Select File > Save. 


@ Dreamweaver 
@2e6 


Edit View Insert Tools Find Site Window Help Cc @ |i 


* about-us.html? | Open Recent > 


Source Code t ; jquery-3.3.1.minjs popper.min.js bootstrap-4.3.1js 


18 Close favorite-temp.dwt. 


Once the content has been added to the new page, you can delete the content 
sections you no longer need. Let's first address the optional editable region. 
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Removing an optional region from a child page 


Optional and editable optional regions are removed from and added to a child 


page in the same way. There is a conditional reference in the <head> section that 


controls the display and removal of the region. 


1 Switch to Code view in about-us.html. 


linte F 
link Are 


‘2 <link href="favorite-cty| 


InstanceParam name="MainCarousel" type="boolean" value="—EEy 


motto, it's a way of life."> 


<meta name="description" content="Favorite City Tour - For 25 years Favorite ¢ 


Around line 13, you should find a reference to the MainCarousel. Note the 
value="true" attribute. When the value is true, the carousel will be added to 


the document. When the value is false, the carousel will be removed. 


2 Select the value true and type false to replace it. 


InstanceParam name="MainCarousel" type="bhoolean" value="false"y 


motto, it’s a way of life."> 


<meta name="description" content="Favorite City Tour - For 25 years Favorite ¢ 


To remove the carousel from the page, you need to use the template update 


command. 
3 Switch to Design view. 
Keep an eye on the carousel at the top of the page. 


4 Choose Tools > Template > Update Current Page. 
_insert (EERE Find site Window Help C@ORPUBAL ORF 


(f Code Split Design v 
Code Navigator... XdEN 


vorite-style 


Clean Up Word HTML... 
Clean Up Web Fonts Script Tag (Current Page) 


Spell Check 
Mariage Fonts... 
1219) Library > 
; Templates > 
Commands > Detach from Template 
‘ Open Attached Template 
-4 HTML ie Check Template Syntax 
> 


CEES Update Current Page 
naan Undate Pegatt. 


The carousel disappears after the page is updated. Later, if you want to insert 


the carousel back into the layout, just change the value back to true. 
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5 Save the page. 


Next we'll remove the card-based and list-based sections that were not used. 


Removing unused sections from a child page 


There are several ways to delete components from a page. The easiest ways rely on 
the tag selector interface or the DOM panel. 


1 Switch to Live view. Select any of the 400 x 200 image placeholders in the card- 
based section. 


Identify the parent element for the entire card-based section. 


2 Select the div.container tag selector. 


| here 

| “ADD HEADLINE HERE 
| 

| 

| 

| 


Product Name : Product Name Produc 


See file;///NewRoad/MacP €2 &S 


3 Press Delete. 


The entire card-based section is deleted. Let’s use the DOM panel to delete the 
list-based section. 


4 Click the headline placeholder in the list-based section. 
In the DOM panel, the h2. text-center element is highlighted. 


5 Select the parent element, div.container. 
Press Delete. 


BOM Assets Snippets = DOM Assets Snippets Si 
TUE EE OSU? 7 {RAMEE LAS WSEAS 7 % 
v [a> wrapper ¥ {div wrapper 
> (div> container > [de> container 
v (div, container + ¥ pontainer 
+ [h2> text-center h2> text-center 
- [div> row NM TOW 
Y Col-lg~4 v [ais col-iged 
v [OD ist-unstyled »~ [8D list-unstyted 
> (i> .media > {> media 
y div onload 


S$ TaIVS entation a © 
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The list-based section is deleted. 


X aboutus html’ 


bpotstrap=4.3.Less — favorite-styles.css — jquery-3.3.1.minjs — poppermins —_ baotstrap~ 4.3.45 ue 


Favorite City Tour 


Book a Tour 
ABOUT FAVORITE CITY TOUR 


"Travel with a Difference” is not just our motto, it’s the way we do business. Here at Favorite City Tour we take travel seriously. Unlike other tour 
companies who have guides who lead tours of several cities, each of our guides has one city for which they specialize. Our tour guides and leaders | 
have lived in their city for five years or more. They Know every neighborhood and attraction like the back of their hands. We live and breathe acity, | 
and so will you. j 


ro. ow a EF Bargain Deals 


Think of a city you’ve always wanted to visit. Now imagine you had a friend living there. That's Favorite City Tour. We're not like other agencies 


CAISSRCO RCE OW > Cowcrimstsncasdnate> Ga") aweasper peg “eontainer @ 1222x514 ~ [Bh 
The empty content sections are removed, and all content elements are complete. 


6 Save the file. 


Dreamweaver’s templates help you build and automatieally update pages quickly 
and easily. In the upcoming lessons, you will use the newly completed template to 
create all the files for the project site. Although choosing to use templates is a deci- 
sion you should make when first creating a new site, it’s never too late to use them 
to speed up your workflow and make site maintenance faster and easier. 
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Review questions 


1 What is the purpose of a Dreamweaver template. 
How do you create a template from an existing page? 


Why is a template dynamic? 


2 
3 
4 What must you add to a template to make it useful in a workflow? 
5 How do you create a child page from a template? 

6 


Can templates update pages that are open? 
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Review answers 

1 A template is a predefined HTML page layout, with image and text placeholders, 
that allows you to create derivative child pages quickly and easily. 

2 ‘To create a .dwt file, choose File > Save As Template and enter the name of the tem- 
plate in the dialog. 

3 A template is dynamic because Dreamweaver maintains a connection to all pages 
created from it within a site. When the template is updated, it passes any changes to 
the locked areas of the child pages and leaves the editable regions unaltered. 

4 You must add editable regions to the template; otherwise, unique content can’t be 
added to the child pages. 

5 Choose File > New, and in the New Document dialog, select Site Templates. Locate 
the desired template and click Create. Or right-click the template name in the Assets > 
Template category and choose New From Template. 

6 


Yes. Open pages based on the template are updated along with files that are closed. 
The only difference is that files that are open are not automatically saved after being 
updated. 
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WORKING WITH TEXT, 
LISTS, AND TABLES 


Lesson overview 


In this lesson, you'll create several webpages from your new template 
and work with headings, paragraphs, and other text elements to do 
the following: 


e Enter heading and paragraph text. 
e Insert text from another source. 

e Create bulleted lists. 

e Insert and modify tables. 

e Spell-check your website. 


e Search and replace text. 

This lesson will take about 3 hours to complete. To get the lesson files 
used in this lesson, download them from the webpage for this book at 
www.adobepress.com/DreamweaverCIB2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 


Rupe comertiex sent x -ecence hen! 


CAMDEDE TCS fee anyten ess Ste LE esas poAgEn ys — Seatttrap-€ je 


OUR FAVORITE TOURS 


Chreok out our fstest favorite tours selection, You can't go wrang by cheasing any one of them. 


400 x 208° 400 «200 400 x 200 


* HdesestntentX ervisechonl X IARRORLMINS | ened 
: 


BERGHE wears tions tmereemyincn MWe ES Eman — pepoeeminyy — SoRMRAAS Si 


TOP TIPS FOR CRUISERS 


Cruises offer many advantages over a typical travel experiance. Hf you plan ahoad you can make your cruise a life-changing 
experience. Here are some of our top tips for successful cruisers: 


Pack efficiently. Bring only what you need and leave seme room in your suitcases for souvenirs and purchases. 
Bring al! your prescriptions and common medicines, Our cruise ships are smatier than average but there still may be a 
wail to see the ship's doctor, Assume you will need aspirin or ibuprofen, Pack Dramamine and tmogium, Label the 


Dottie: = Ses Minl % crachenNiay < ceotsst-unbent ascii hed 
Books GGREREEE) coonenn-e2scin farce unten ces Rene FL Liminls — parperimings — bectstnap-4 3p 
if you : POT # 


the me 


Pack ¢ CONTACT FAVORITE CITY TOUR 


excure | 


| "© Elaine Rendel Sarah Harvey “Bric Quist 
H Elaine is (he President and f Sarah arranges alt our Evi is our transportation 

4 CEO of Favorite City Tour. She ¥ seminars and classes. Sarah a expert, He can review your 
Sica. has 20-years experience in makes these offerings start on needs and resources to 
Favorit © 2he travol industry and worked = | time and meet their goals, 40 identify the best solutions for | 


Lary Conte at several Iravel agencies in i you Can enjoy every minute, daliy transport to or in any 
thecedien, the past developi % sathed * encased xemterlsva healt x eventanter 


PiiGGO? cruise packages { GRMRRAEE? recep A 3.1.c1  Revarcettyien iss Ru STLmas popes nen Bpommtit KL 
individuals and ta PPI sa ten cree Seassdainiducantoncslcnomtcncatmeriosnsiosnelaniartraicaod cliche w ease 
—— corporations OUR FAVORITE FESTIVALS AND SEMINARS 
$ She's not afraid o Want to see how the world parties? Want to learn 3 new language? There's no time like the present. Check out our list of international festivats and 
coca | aproblem, Your’ | —_‘0oal Seminars. The schedule is updated on a reguiar basis, so you may want to bookmark this page and check it often. Hope to see you soon! 
' answering your pe 
checking out a pt 
have with a reser? 2020 INTERNATIONAL FESTIVAL SCHEDULE 


Email Elaine ot 


Clainn@FavoriteS Feb 2-26, 2020 Carrivate Of Vonezia Venice ~ ttaty 


Feb 25, 2020 Marth Gros New Orleans, Louisions ~ USA 


Lainey Harris Mar 9-10, 2020 Holi Mambai, Dehli ~ instis 
Lainey manages ¢ Fob 21-26, 2020 Rio Carnival Rio Be Janeiro ~ Brazit 
chicane Mar 13-22, 2020 SxSW Austin, Texos = USA 
April 27, 2020 Kings Day Amstordom ~ Netherlands 

April 12-18, 2020 Snowbombing Maythoten ~ Austria 

April 13-15, 2020 Songkran Chaing Mai & Bangkok = Thatand 
May 22- July 24, 2020 Stara Of The White Nights St Petoraburg = Russia 

May 12-23, 2020 Cannes Fitm Festival Cannins - France 

June 24-28, 2020 Glastonbury Music Festival Puton, Somerset ~ UK 

June 29, 2020 San Vino Wine Fight Haro = Spain 


June 12-14, 2020 Download Music Festival Donington Park, Leicestershire - UK 


fhe a? 90 Anan vais Dries Retalune 


Dreamweaver provides numerous tools for creating, 
editing, and formatting text content, whether it’s 
created within the program or imported from other 
applications. 
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Previewing the completed file 


To get a sense of the files you will work on in this lesson, let’s preview the com- 


pleted pages in Dreamweaver. 


1 Launch Adobe Dreamweaver (2020 release) or later, if necessary. 


If Dreamweaver is already running, close any open files. 


2 Define a new site for the lesson08 folder, as described in the “Getting Started” 
section at the beginning of the book. Name the new site lesson08. 


® Note: To open 3 If necessary, press F8 to open the Files panel. 

consecutive files, hold Select lesson08 from the site dropdown list. 

the Shift key before 
selecting. If the files are Dreamweaver allows you to open one or more files at the same time. 


not listed consecutively, , 
use the Ctrl/Cmd key to 4 Open the lesson08/finished folder. 


select the files. 5 Select tours-finished.html. 


th 


Files CC Libraries Insert CSS Designer 


= > Eilessonos ~ (bef 
Local Files & q 
~ 6 Site - lesson08 (NewRoad:MacProjects:Peachpit:DWCC2020:webs:DWCC2020:Lessons'le... 
</> about-us.html 
> © css 
{} favorite~styles.css 
~ © finished 
</> aboutus-finished.html 
<> contactus-finished, htm! 
<> cruises-finished.html 
> & css 


</> events-finished.htm| 


{} favorite-styles.css 
> © images 
> B js 
<)> tours-finished.htm! 
> B images 


Hold Ctrl/Cmd, and then select events-finished. html, cruises-finished.html, 
and contactus-finished.html. 


By holding Ctrl/Cmd before you click, you can select multiple non-consecutive 
files. 


6 Right-click any of the selected files. 
Choose Open from the context menu. 


All four files open. Tabs at the top of the document window identify each file. 


© Note: Be sure to use Live view to preview each of the pages. 


250 LESSON 8 Working with Text, Lists, and Tables 


7 Click the tours-finished.html tab to bring that file to the top, and switch to 
Live view if necessary. 


OUR FAVORITE TOURS 


Check out our latest favorite tours selection. You can't go wrong by choosing any one of them. 


2] 


London Tea French Bread When in Rome 
If you have never experienced high tea, Have you ever smelled French bread For centuries the heart of western 
you need to take this tour. This is a side fresh from the oven. You can’t get this civilization was Rome. Come home and 
of London unseen by most. experience in some high-rise hotel. see where everything started. 


Gi 


lore Info 


seas 


muntinstancetilemnstance body mantdnseanerseditadic @ 1202x563 ~ [BB 


Note the headings and text elements used. 


8 Click the cruises-finished.html document tab to bring that file to the top. 


S o 500 s S Ev Ss Te T re 
Coastal California Beans and Big Apples Southern Charm 
Some say the coast off Monterrey is one Approach Boston and New York from Nothing prepares you for seeing 
of the most beautiful in the world. Top the sea and you will never think of these Savannah and Charleston from the 
off the trip in San Francisco. towns in the same way again. water. Breathtaking views are common. 


Get More Info Get More thfo 


TOP TIPS FOR CRUISERS 


Cruises offer many advantages over a typical travel experience. If you plan ahead you can make your cruise a life-changing experience. Here are 
some of our top tips for successful cruisers: 


+ Pack efficiently. Bring only what you need and leave some room in your suitcases for souvenirs and purchases. 

* Bring all your prescriptions and common medicines. Our cruise ships are smaller than average but there still may be a wait to see the ship's 
doctor. Assume you will need aspirin or ibuprofen. Pack Dramamine and Imodium, Label the bottles and bring a copy of your prescription, 

* Books excursion, spa and dinner reservations in advance, when possible. These services often fill up quickly. 

* If you have a choice, take the late dinner seating. Most dinners offer two or more seatings. The late one will give you the most flexibility and is 
usually the most relaxed. No one will be rushing you to make room for the next diner. 

* Pack good hiking or walking shoes. You'd be surprised how many cruisers are sidelined by blisters after their first excursion. Don't let this 
happen to you. Make sure you break in your shoes before your trip if they are new. 


~ 


mrintinstance fenstance boty pereninstance ecitabie © 1202 x 563 


Note the bulleted list elements used. 
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9 Click the events-finished.html tab to bring that file to the top. 


Get a Quote Book a Tour Bargain Deals 


OUR FAVORITE FESTIVALS AND SEMINARS 


Want to see how the world parties? Want to learn a new language? There's no time like the present. Check out our list of international festivals and 
local seminars. The schedule is updated on a regular basis, so you may want to bookmark this page and check it often. Hope to see you soon! 


2020 INTERNATIONAL FESTIVAL SCHEDULE 
Date Event Location 


Feb 2-25, 2020 Carnivale Di Venezia Venice - Italy 


Feb 25, 2020 Mardi Gras lew Orleans, Louisiana 


Mumbai, Dehli — Indi: 


Mar 9-10, 2020 


Feb 21-26, 2020 


= “Austin, Texas - USA 
—- "Amsterdam Netherlands 

Mayrhofen Austria 
—_ ~~ Chaing Mai & Bangkok- Thailand 


St Petersburg — Russia 


Mar 13-22, 2020 
April 27, 2020 


April 13-18, 2020 


April 13-15, 2020 


Songkran 


May 22- July 21, 2020 ‘ars Of The White Nights 


May 12-23, 2020 


Cannes Film Festival Cannes ~ France 


@® 1202x363 ~ fay 


Note the two HTML-based tables used. 

10 Click the contactus-finished.html tab to bring that file to the top. 
Note that the text elements are formatted with custom borders. 

11 Choose File > Close All. 


In each of the pages, a variety of elements are used, including headings, paragraphs, 
lists, bullets, indented text, and tables. In the following exercises, you will create 
these pages and learn how to format each of these elements. 


Creating and styling text 


Most websites are composed of large blocks of text with a few images sprinkled in 
for visual interest. Dreamweaver provides a variety of means for creating, import- 
ing, and styling text to meet any need. 


Importing text 


In this exercise, you'll create a new page from the site template and then insert 
heading and paragraph text from a text document. 


POM Assets Snippets 


=| 1. Choose Window > Assets to display the Assets panel. 
Select the Templates category icon 2). 


a | Right-click favorite-temp and choose New From 
Refresh Site List | 


Templates 


re 
Favorite City To 
Q 
o 


z aan Ao Daan Template from the context menu. 
</> favorite-temp — \s/favorite-temp.dwt . . 
New Template _ A new page is created based on 
@ ee pag the site template. 


Edit 


cA S 
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2. Save the file as tours.html in the site root folder. 
Make sure the document window is at least 1200 pixels wide. 


When you create a file, it’s a good idea to immediately update or replace the 
various metadata placeholder text elements in the new page. These items are 
often overlooked or forgotten in all the hubbub around creating the text and 
images for the main content. First, you'll update the page title. 


3 Ifnecessary, choose Window > Properties to display the Property inspector. 


® Tip: The Property inspector may not be visible in the default workspace. You can access it in 
the Window menu and dock it to the bottom of the document window. 


The Document Title field is featured in the Property inspector most of the time 


you are working in a document. 


4 Inthe Document Title field, select the placeholder text /nsert Title Here. 
Type Our Favorite Tours and press Enter/Return to complete the title. 


Properties 


Format None v 


f& css 


Document Title 


= ~ Favorite City Tour a 


Properties 


Tip: The Assets 
panel may open asa 
separate, floating panel. 
To save screen space, 
feel free to dock the 
panel on the right side 
of the screen, as shown 
in Lesson 1, “Custom- 
izing Your Workspace.” 


© Note: The Templates 
category icon of the 
Asset panel appears 
only in Design and Code 
views when documents 
are open. You will also 
be able to see it and 
select a template when 
no document is open. 


i Format None v Class yy 
& css | 1D None e Link 
Document Tithe { Our Favorite Tours ~ Favorite City Tour | 


eal 


Each page also has a meta description element, which provides valuable infor- 


mation about your page content to search engines. You can edit it in Code view 


or using the Property inspector with help from the DOM panel. 


5 Choose Window > DOM to display the DOM panel, if necessary. 


The meta description is located in the <head> section of the page. 


6 Expand the head element in the DOM display. 


DOM Assets Snippets z | 


S 
~ | mmtinstance:fileinstance > 
>, [head> 
|, Sameera 
~ [Body> 
navbar .navbar-expand-lg .navbar-dark .bg-da 
header 
> [header row 
> | Mmtinstance:editable > 
——— 
> [div>, container 
> | mmtinstance:editable 
YY 
> container .bg-dark .p-4 
footer 
yy 
script> 
script> 
script> 


When the head section expands, you should see the various elements contained 


DOM Assets Snippets 

- [i> 
~ [mmtinstancereditable> 
[ body > 


—_ 


in 


< 


within it. There are three meta elements, two links, and two editable regions. 


One editable region contains the title, which may be visible. The other contains 


the meta description. 
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7 Expand the second editable region. 
You should see a meta element within the editable region. 


8 Click to highlight the meta element in the DOM panel. 


DOM Assets Sulppets 

~ [romtinstance fleinstance> 
~ [head 

w ([masennce ean) 

~ & 

. 

By REE 

» [body> 


Properties 38 
Description: Favorite City Tour ~ add description here 3 
| Be 
: G 


Sy 


> [Nay navbar .navbar-expand-lg .navbar~dark .bg- 


th 
> PReader> row 


> 


The content of the meta element appears in the Property inspector. 


9 Select the text add description here and type the following: 
We worked hard to develop these tours for you. They are guaranteed to be 
your favorite, too! 


Once the metadata is updated, you can start working on the main content. 


10 In the Files panel, double-click favorite-tours.rtf in the lesson08/resources 


folder. 
@ TextEdit File Edit Format View Window Help 

@ @ 6 x favorite-tours.rtf 

qv Helvetica $ Regular 6412 vier Bru a= = Se 10 Se Ey 
¥ > > > > b > > > » > > * : 

fo 1 2 3 4 5 6 7 8 
--Item 1-- 
London Tea 


If you have never experienced high tea, you need to take this tour. This is a side 
of London unseen by most. 


--ltem 2-- 
French Bread 


Have you ever smelled French bread fresh from the oven. You can't get this 
experience in some high-rise hotel. 


}-Item 3-- 
When in Rome 


For centuries the heart of western civilization was Rome. Come home and see 
where everything started. 


Dreamweaver automatically launches a program compatible to the file type 
selected. The text is unformatted and features extra lines between each para- 
graph. These extra lines are intentional. For some reason, Dreamweaver swaps 
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out single paragraph returns for <br> tags when you copy and paste them from 
another program. Adding a second paragraph return in your source text forces 
Dreamweaver to use paragraph tags instead of the break tag. 


This file contains nine tour descriptions that you will use to populate the card- 
based content section. 


11 In the text editor or word-processing program, position the cursor before the 
text London Tea. 


12 Drag to select the heading. 

13 Press Ctrl+X/Cmd+xX to cut the text. 
14 Switch back to Dreamweaver. 

15 Switch to Live view, if necessary. 


The sample page has three sample card-based placeholders in the middle con- 
tent section. The content you cut from favorite-tours.rtf will be inserted into 
the first placeholder. 


16 In the card-based section, select the text ADD HEADLINE HERE. 
Type OUR FAVORITE TOURS to replace it and press Enter/Return to create a 
new line. / 


When you press Enter/Return in Live view, Dreamweaver automatically creates 
anew <p> element. 


17 Type Check out our latest favorite tours selection. You can’t go wrong by 
choosing any one of them. 


The introductory text would look nicer centered under the heading. You may 
remember applying the Bootstrap class .text-center to center the place- 
holder heading in the previous lesson. 


18 In the Element Display on the new paragraph, click the Add Class/ID icon [+]. 


19 Type .text-center and press Enter/Return to apply the class to the 


<p> element. 


OUR FAVORITE T 


20 Select the text Product Name in the first card-based element. 


) Tip: When you use 
the clipboard to bring 
text into Dreamweaver 
from other programs, 
you can then use Live or 
Design view if you want 
to honor the paragraph 
returns. 


® Tip: Starting in 

this version of Dream- 
weaver, you can directly 
edit text in Live view. 
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21 Press Ctrl+V/Cmd+V to paste the text from favorite-tours.rtf. 


BU RLY ; yl SUU EN £0 ea 

= hs ; 
+f ts) ; Prox 

th : é Pro) 4 
Some quick example text to ; Some quic ' Some quick example text to 3 Some quic 
build on the product name and i build on the | build on the product name and 4 build on the 


mala rin tha hull) af tha nradiuat : mala un the t mala un tha hull af tha nraduat : mata in tha 


The heading London Tea replaces the placeholder text. 


22 Switch to favorite-tours.rtf. 
Select the tour description for Item 1. 


23 Press Ctrl+X/Cmd+X to cut the description. 


24 Switch to Dreamweaver and select the placeholder description in the first card- 
based element. 


25 Press Ctrl+V/Cmd+V to paste. 


The description is replaced by the text from favorite-tours.rtf. 


= Ec 


If you have never experienced 


high tea, you need to take this 
tour. This is a side of London 
unseen by most. 


ee 


The text in the first card-based element has been replaced. 


26 Switch to favorite-tours.rtf. 
Use cut and paste as above to move items 2 and 3 to tours.html. 


The three card-based elements are populated by the tour titles and descriptions. 
Next, you'll create two additional rows of tour descriptions that you can then fill 
with the remaining text in favorite-tours.rtf. 


Duplicating Bootstrap rows 


The row and column scheme that Bootstrap uses to support various screen sizes 
can be very tedious to build by hand. Fortunately, Dreamweaver provides a built-in 
interface that makes this a simple point-and-click task. 


1 Select any of the image placeholders in the card-based section. 


2 Select the div. row. text-center tag selector. 
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- 400x200 400 x 200 


London Tea : French Bread i When in Rome 
If you have never experienced 7 i Have you ever smelled French i : For centuries the heart of 
high tea, you need to take this ‘ bread fresh from the oven. You : western civilization was Rome. 
tour. This is a side of London : can't get this experience in i Come home and see where 
unseen by most. : some high-rise hotel. : everything started. 


ADD HEADLINE HERE 


EWXESEOS ' ree ae 


Get More Info 


colemd-4.pb-Lpb-md-G6 de card img card-img-top 


When the element is selected, the Element Display shows two additional icons 
on the lower- or upper-right corner of the element. The icons enable you to cre- 
ate a new Bootstrap row or to duplicate it. If you were to click the Add a New 
Row icon =, youd have to re-create all the elements used in the card-based 
elements. Since the first row already has all the elements we need, let’s just 
duplicate it to save a lot of time and effort. 


3 Click the Duplicate Row icon 1. 


London Tea : French Bread i When in Rome 
If you have never experienced Have you ever smelled French : For centuries the heart of 
high tea, you need to take this i bread fresh from the oven. You ; western civilization was Rome. 
tour, This is a side of London i can’t get this experience in : Come home and see where 
unseen by most. : some high-rise hotel. everything started. 


Get More info Get More Info 


400 x 200 400 x 200 400 x 200 
London Tea i French Bread When in Rome 
If vou have never experienced Have vou ever smelled French For centuries the heart of 
feinstance not mratinstance editable dy wrapper iy container div row, text-center 2 1193 x 468 


A new row appears below the selection, with duplicate content and structure. 
Notice that the new row is butting up to the first row. It could use a little spac- 
ing. You may have noticed the Bootstrap class .mt-4 applied to various ele- 
ments in the layout. This class adds a margin-top property to an element. 


4 Select any of the image placeholders in the second row of the card-based 


section. 


5 Select the div. row. text-center tag selector. 
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6 Inthe Element Display on the new paragraph click the Add Class/ID icon eel) 


7 Type .mt-4 and press Enter/Return to apply the class. 


| Get More Info: | 


gy atext-center + 


400 x 4 ' 
400 x 200 | 400 x 

London Tea French 
landan Toa - Eranch 


The entire row moves down. Once you have created and formatted the second 
row, you might as well add the third row. Depending on where the new row 
displays in the document window, the Duplicate Row icon may appear at the 


top or bottom of the selection. 


® Note: If the selected 8 Click the Duplicate Row icon (. 


element displays an 


tour. This is a side of London ‘can't get this experience in, : Come home and see where 


orange border, the I unseen by most. H some high-rise hotel. everything started. 


duplicate command will | 7 
not work. Click the Ele- | 


ment Display to display 
the blue border. 
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Get More info | 


. ; . . 
6004200... 2. ee 2 A 00 


A duplicate row appears below the second row. Now you can bring over the 


remaining content. 
9 Move the remaining tour titles and descriptions from favorite-tours.rtf. 
10 Close favorite-tours.rtf and do not save the file. 


By not saving the file you will be able to access the content later if you wish to 


redo this lesson. 
11 Save tours.html. 


Once the text has been moved over and the content is complete, you can delete the 
content elements you do not need. 


Deleting unused Bootstrap components 


The template was set up with an image carousel and three content sections. For 
tours.html you used the card-based content section. In Lesson 9, “Working with 
Images,’ you'll learn how to add images to the carousel, so we'll leave the carousel 
in the template. The text-based section under the carousel and the list-based sec- 
tion are unused and unneeded, so let’s delete them. 
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1 Select the text ADD HEADLINE HERE in the text-based section. 
2 Select the div.container tag selector and press Delete. 


O 


Dadicater ten SoBe orn Sa ee Check out our latest favorite 


The text-based section is deleted. The card-based section moves up, butting up 
against the link section under the carousel. It could use a bit of spacing above it. 
You can use the .mt-4 class again. 


3 Select the headline OUR FAVORITE TOURS. 
4 Select the div.container tag selector. 


5 Using the Element Display, add the class .mt-4 


— GetaQuotte ==——(isé‘“‘;CS”*SSCéOKA TOU 


ad nnn ire nme cn Sl | Lie eee ome Sloe ww in ear pie coon me re fase EE neal 


= 


PAS RE 
S's .container .mt-4 


a eS a a NR Te 


The element moves down. 
6 Select the text ADD HEADLINE HERE in the list-based section. 


7 Select the div.container tag selector and press Delete. 


» Tip: Look for the 
blue border when delet- 
ing selected elements. 
The orange border indi- 
cates that the content 

is selected. Click the tag 
selector again or the 
Element Display itself to 
activate the blue border. 


vivauway YU WIS LIVIA, Wo NiIUV VivauWway W WIS LIVIA, Wo KITUW DIvauway yu WIT LIVIA, Wo RITUW 


inch of the Big Apple. inch of the Big Apple. inch of the Big Apple. 


Get More Info Get More Info Get More Info 


Ri container f+] em container + 


Add Name Here / | Add Name Here 
Cras sit amet nibh libe Cras sit amet nibh lib 
100 2125 gravida nulla. Nulla vel || | t0exi%s gravida nulla. Nulla v 


Notice the blue border around the element before pressing Delete. The entire 
list-based section is deleted, and the layout is complete for now. 


8 Save the file and close it. 


Next you'll learn how to create HTML lists. 
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© Note: The Template 
category is not visible in 
Live view when a docu- 
ment is open. To create, 
edit, or use Dream- 
weaver templates, you 
must switch to Design 
view or Code view or 
close all open HTML 
documents. 


Creating lists 


Formatting should add meaning, organization, and clarity to your content. One 
method of doing this is to use the HTML list elements. Lists are the workhorses 
of the web because they are easier to read than blocks of dense text; they also help 


users find information quickly. 
In this exercise, you will learn how to make an HTML list. 


1 Open the Assets panel. 
In the Template category, right-click favorite-temp. 
From the context menu, choose New From Template. 


A new page is created based on the template. 


2. Save the file as cruises.html in the site root folder. 
Switch to Live view, if necessary. 
Make sure the document window is at least 1200 pixels wide. 


3 Inthe Property inspector, select the placeholder text /nsert Title Here in the 
Document Title field. Type Our Favorite Cruises to replace the text and press 
Enter/Return. 


4 Switch to Code view. 
Locate the meta description element. 


Select the:text add description here. 


5 Type Our cruises can show you a different side of your favorite cities and 
save the file. 


InstanceParam name="MainCarousel" type="boolean" value="true” 


<meta name="description" content="Favorite City Tour - add description here"> 


InstanceParam name="MainCarousel" type="boolean" value="true" 
<meta name="description" content="Favorite City Tour - Our cruises can 
show you a different side of your favorite cities "> 


if 
cect ; 


The new description replaces the placeholder. 


6 Inthe Files panel, double-click cruise-tips.rtf in the resources folder of 
lesson0s. 
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The file will open outside Dreamweaver. The content consists of a list of tips on 
how to make your cruise experience better. 


7 In favorite-tips.rtf, press Ctrl+A/Cmd+A. 
Press Ctrl+X/Cmd+X to cut the text. 
Close, but do not save changes to, cruise-tips.rtf. 


You have selected and cut all the text. 
8 Switch back to Dreamweaver. Switch to Live view. 


9 Select ADD HEADLINE HERE in the text-based content section. 
Type TOP TIPS FOR CRUISERS to replace it. 


10 Select the text Add content here. 
Select the p tag selector. 


The Element Display appears focused on the p placeholder element. 


11 Press Ctrl+ V/Cmd+V. 


TOP TIPS FOR CRUISERS 


div EE 


Add content here. 


| experience. Here are some of our top tips for successful cruisers: 
| Pack efficientiy. Bring only what you need and leave some room in your suitcases for souvenirs and purchases. 


| Bring all your presciptions and common medicines. Our cruise ships are smaller than average but there still may be a wait 
| to see the ship's doctor. Assume you will need aspirin or ibuprofen. Pack Dramamine and Imodium. Label the bottles and 


| Book excursion, spa and dinner reservations in advance, when possible. These services often fill up quickly. 


If you have a choice, take the late dinner seating. Most dinners offer two or more seatings, The late one will give you the 
most flexibility and is usually the most relaxed. No one will be rushing you to make room for the next diner. 


Pack good hiking or walking shoes. You'd be surprised how many cruisers are sidelined by blisters after their first 


| Cruises offer many advantages over a typical travel experience. If you plan ahead you can make your cruise a life-changing 


bring a copy of your prescription. s 


The text from cruise-tips.rtf appears below the placeholder element. Before we 


deal with the new text, let’s delete the placeholder. 
12 Select and delete the entire placeholder element Add content here. 


The text from cruise-tips.rtf is currently formatted entirely as HTML paragraphs. 
Dreamweaver makes it easy to convert this text into an HTML list. Lists come in 
two flavors: ordered and unordered. 

Creating an ordered list 


In this exercise, you will convert the paragraph text into an HTML ordered list. 


1 Select all the text, starting with Pack efficiently. 
In the Property inspector, click the Ordered List icon EE]. 
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experience. Here are some of our top tips for successful cruisers: 


—-——~-{}-~— ~~] 


“ADD HEADLINE HERE 


1151 x 464 
tnstanc@editiile div wrapper Gly container iv 2) 


Format None ¥ Class (cot-Ig-12 By) * use 2= Title 
Link Target 


0 None 


An ordered list adds numbers automatically to the entire selection. Seman- 
tically, it prioritizes each item, giving them intrinsic values relative to one 
another. However, this list doesn’t seem to be in any particular order. Each item 
is more or less equal to the next one, so it’s a good candidate for an unordered 
list—used when the items are in no particular order. Before you change the 
formatting, let’s take a look at the markup. 


2 Switch to Split view. 


lily <ol> 


' experience. Here are some of our top tips for successful cruisers: 


iy 


<li>Pack efficiently. Bring only what you need and leave some room in your suitcases for souvenirs and purchases.</l/> 

all>Bring all your presciptions and common medicines. Our cruise ships are smaller than average but there still may be a wait to see the ship's doctor. 
Assume you will need aspirin or ibuprofen, Pack Dramamine and Imodium. Label the bottles and bring a copy of your prescription. </li> 

<li>Book excursion, spa and dinner reservations in advance, when possible, These services often fill up quickly.</li> 

<li>if you have a choice, take the late dinner seating. Most dinners offer two or more seatings. The late one will give you the most flexibility and is ‘usually 
the most relaxed. No one will be rushing you to make room for the next diner.</li> : : 

<lisPack good hiking or walking shoes. You'd be surprised how many cruisers are sidelined by blisters after their first excursion. Don't let this happen to 


mimtinstenceeditable dy wrapper Gv container “div row dv col-lg-12 Be @ H™ML ¥  11six308 + INS lie197 [BR 


Format None ~ Class (eolntg-12 -ig- iiiny) A a 22 


es 
Title @ { 
4 


Observe the list markup in the Code section of the document window. 


The markup consists of two elements: <ol> and <1i>. Note that each line is for- 
matted as an <1%> (list item). The <ol> parent element begins and ends the list and 
designates it as an ordered list. Changing the formatting from numbers to bullets is 
simple and can be done in Code view or Design view. 


Before changing the format, ensure that the formatted list is still entirely selected. 
You can use the <ol> tag selector, if necessary. 
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Creating an unordered list 
In this exercise, you will convert the ordered list into an unordered list. 


1 In the Properties panel, click the Unordered List icon E3]. Tip: The easiest way 


to select the entire list 
is to use the <ol> tag 
selector. 


> Tip: You could also change the formatting by editing the markup manually in the Code view 
window. But don’t forget to change both the opening and closing tags. 


| experience. Here are some of our top tips for successful cruisers: 


* Pack efficiently. Bring only what you need and leave some room in your suitcases for souvenirs and purchases. 
* Bring all your presciptions and common medicines. Our cruise ships are smaller than average but there still may be a 
| wait to see the ship's doctor. Assume you will need aspirin or ibuprofen. Pack Dramamine and Imodium. Label the 
it} bottles and bring a copy of your prescription. c) 
* Book excursion, spa and dinner reservations in advance, when possible. These services often fill up quickly. 
* If you have a choice, take the late dinner seating. Most dinners offer two or more seatings. The late one will give you 
the moact flavihility. and ic penath: the mact ralavad Na ano will ha ciuchina wait ta male ranam far the novt diner 
rv <div class="col-Ig-12"> 
0 ¥ <p>Cruises offer many advantages over a typical travel experience. If you plan ahead you can make your cruise a life-changing experience, Here are some of 
our top tips for successful cruisers:</p> 
¥ <ul> 
<li>Pack efficiently. Bring only what you need and leave some room in your suitcases for souvenirs and purchases. </li> 
<ii>Bring all your presciptions and common medicines. Our cruise ships are smaller than average but there still may be a wait to see the ship's doctor. 
Assume you will need aspirin or ibuprofen. Pack Dramamine and imodium. Label the bottles and bring a copy of your prescription.</li> 
<li> Book excursion, spa and dinner reservations in advance, when possible. These services often fill up quickly.</li> 


comtainer div > row dv © .col-ign42 QO HtML v 111x308 ~ INS i10197 [SR 
SB Coat Bierce oi Saeed o ses Fens athe ranrar ee ere 
Format None Y Class (col-tg-12~) GBs <= cs Title ® 
iD None G Link Target a 


All the items are now formatted as bullets. 


If you observe the list markup, you'll notice that the only thing that has changed 
is the parent element. It now says <ul>, for unordered list. 


Before you close this file, let’s complete the rest of the page. 


2 Inthe card-based content section, select the placeholder heading ADD 
HEADLINE HERE. 


3 Type OUR FAVORITE CRUISES to replace the selection. 


4 Inthe Files panel, double-click favorite-cruises.rtf in the lesson08/resources 


folder. 

®66 1 favorite-cruises.rtf 

Wy  HelveticaNeue 2 Regular vie BI U Bg@Za 223.6) iv 
¥ ¥| 
° 1 2 3 4 5 6 7 
--Item 1-- 


Coastal California 


Some say the coast off Monterrey is one of the most beautiful in the world. 
Top off the trip in San Francisco. 


--ltem 2-- 


Beans and Big Apples 
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The favorite-cruises.rtf file opens. The text should be inserted in the card- 
based content section. 


5 Copy and paste the text into the appropriate placeholders in the card-based 
content section. 


Coastal California : Beans and Big Apples a Southern Charm 


is) 
i Some say the coast off ; Approach Boston and New York i Nothing prepares you for seeing : 
| Monterrey is one of the most : from the sea and you will never i Savannah and Charleston from 
| beautiful in the world. Top off : think of these towns in the same : the water. Breathtaking views 


the trip in San Francisco. : way again. : are a daily fare. 


| Get More Info Get More Info : Get More Info 


The three card-based elements are now populated with cruise descriptions. 
Once the content is in place, it’s time to delete the unneeded placeholder ele- 
ments. The carousel will be updated with cruise photos in Lesson 9, but you can 
delete the list-based content section. 


6 Select and delete the list-based content section. 


ENG .container Hf + 


Cras sit amet nibh , 

108 x 188 libero, in gravida nulla. : 100 e128 
Nulla vel metus j 
scelerisque ante 


mmitinstanceeditadia GN wrapper » container div row div .col-ig-4 vimtinstance editable div wrapper div container 


ID | Class (container v 


Format None v Class (wrapper v) oer 


fait 
at 


The layout is nearly complete. Since the page is focused on selling cruises, it 
makes sense to put the cruise descriptions above the tips content. The DOM 
panel makes it easy to move elements around in the layout. 


7 Select Window > DOM if necessary to display the DOM panel. 
8 Select the headline TOP TIPS FOR CRUISERS. 


The h2 element in the DOM panel is highlighted. You can see the structure 


of the text-based content section. The parent element for the entire section is 
div.container. 
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9 Select the headline OUR FAVORITE CRUISES. 


DOM Assets Snippets = 6 DOM Assets Snippets ‘ s 
> [Reader> row > [headeny row 
> Lmmntinstancecedizable 
ee 
> [Giy> container 
» [Lmmtinstance editable 
NZ .wrapper 
MY, container 


> (rimuinstancereaTtabTey 
> {dix .container 
v wrapper 
wv, container 
[h2> .text-center 


v -row 
v col-lg-12 ¥ colsig~12 
> {» 
> AY, 
a -container container 


[R2> .text-center 
{> 


~ Idiv> row .text-center 


| [RD texecemter 
“ h 


v [div> row text-center 


The h2 in the card-based content section is highlighted. Like the text-based sec- 
tion, the card-based section is also based on div. container. By dragging one 
of these elements you can swap the two sections in the layout. 


At the moment, the two HTML structures are expanded. Collapsing the parent 
elements can help make moving the elements a bit easier. 


10 Collapse the structure display for the two div. container elements. 


DOM Assets Snippets = DOM Assets Snippets = 
4 , Ce 
. S 
> ey .Mavbar .navbar-expand-lg .navbar-dark .bg-dark > «navbar navbar-expand-lg .navbar~dark .oq-dark 
> (header> row > [Reader> row 
> [div container > [diy container 
- awrapper v -wrapper 
> [div container > (civ .container 
; ; Ee, container > BY, container 
ee eee (BD text-cemer > [ivy .container .bg-dark .p~4 
& > [oxen 
v row ,text-center 
v [GiX> .col-md-4 .pb-1 .pb-md-0 
~ card 
When collapsed, the elements are stacked one above the other at the same level @ Note: When you're 


dragging the element, 
Dreamweaver may 


11 Drag the card-based section above the text-based section. expand the structure. 


of the structure. Seeing the two elements this way simplifies the change. 


~ [| mmtinstance:editable v | mmtinstance:editable > 


~ [div> wrapper v .wrapper 
> [div .container ~ diy container 
+ —__>:—«(A. container : : [h2> .text-center 
; > [avy container -bg-dark .p-4 i TOW 
> ~ col-Ig-12 
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> Tip: If the element A green line indicates where the element will appear. The cruise descriptions 


spe ate ne Ong now appear above the cruise tips section. As before, the card-based section 
position, select Edit > 


Undo and try again butts up against the links and need a bit of spacing. 


12 Select the headline OUR FAVORITE CRUISES. 
Select the div. container tag selector. 
Add the class .mt-4 to div. container. 


container ff amt 


centainer 


Our cruises are a cut above. Our ships are smaller, ma 
you've only dreamed about. 


Ou 


Our cruises are a cut above. Our ships are smaller, maxi) 
Hi 
you've only dreamed about. i 


The tips section could also use some extra space. 


13 Select the headline TOP TIPS FOR CRUISERS. 
Select the div. container tag selector. 
Add the class .mt-4 to div. container. 


TOF 


Cruises offer many advantages over a typical travel expe 
some of our top tips for successful cruisers: 


; Cruises offer many advantages overa typical travel expe 
some of our top tips for successful cruisers: 


¢ Pack efficiently. Bring only what you need and leav 


¢ Bring all your presciptions and common medicines.. ¢ Pack efficiently. Bring only what you need and leav 


The layout is complete. 
14 Save and close cruises.html. 
15 Close favorite-cruises.rtf without saving any changes. 


You've learned how to use lists in the traditional way. But lists can also be used to 
build elaborate content structures. The template features such a content section. 


Basing content structures on lists 


Semantically, lists feature a series of words or phrases of a related topic displayed 
sequentially, usually one over the other. But in HTML, lists can feature much more 
complex content, including multiple paragraphs of text, images, and more. To the 
search engines this is a totally valid structure. 


In this exercise, you will use the list-based content section in the template to create 
the company’s employee contact-list. The list will be composed of six individual 
bios, stacked two high in three columns. 


1 Create a new page from favorite-temp.dwt. 
Save the page as contact-us.html. 


266 LESSON 8 Working with Text, Lists, and Tables 


Select the title placeholder in the Property inspector. 
Type Meet our favorite people 


The new page has three content sections. You will use the list-based section at 
the bottom. Before we get to that, you will remove all the components that are 
unneeded. Let’s start with the image carousel. 


Switch to Code view. 


The carousel is part of the optional editable region. You control its display by 
changing a value in an HTML comment in the <head> section. 


Locate the comment in the <head> section (around line 15). 


The comment currently says value="true". 


Select the value true and type false to replace it. 


HAM APeT= 7 CYieS.css frei styresmee \ 


InstanceParam name="MainCarousel” type="boolean” value="true" 


croaRanineditahla nay 


BAC 


Ge Ape ay 
value="false" } > 


InstanceParam name="MainCarousel” type="boolean 


<meta name="description” content="Favorite City Tour - add description here"> 


Choose Tools > Templates > Update Current Page. 


The carousel is removed from the layout. While you are in Code view, you 


should edit the meta description. 


In the meta description, select and replace the text add description here 
with Meet the staff of Favorite City Tour 


Let’s remove the text-based content section next. 


Switch to Live view. 


Since the carousel was removed, the text-based section is now at the top of 


the layout. 


Select the div. container tag selector for the text-based section. 


eI conarer_ f+] 


r Add content here. 


etaQuote — ( G2): BookaTour | 


ADD HEADLINE HERE 


mitinstance fleinstance body romtitstance editable div wrapper Lia container = div row diy colelqu12 p 
joperties 
Div ID Class Ccomainer_ ¥) 
le sl 
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The Element Display appears around the selection. If the border is blue, you can 


skip to step 11. 
10 Click the Element Display. 
The border displays in blue. 


11 Press Delete. 


"Add content here. _ 


400 x 200 a: 


body 


The text-based section is deleted. 
12 Repeat steps 9-11 to select and delete the card-based section. 


et a Quote |. Book a Tour 


ADD HEADLI 


~ Add Name Here Pil Add Name 
Cras sit amet nibh libero, in é Cras sit am 
gravida nulla, Nulla vel metus | © | seni gravida null 
scelerisque ante sollicitudin. t scelerisque 


400 x 200 


i 
eaditable dee verapper 


Properties 


a Di ID Chass Coomtainer vy) 
ie anes 


format None 


Only the list-based section is still part of the layout. 


13 Select the placeholder text ADD HEADLINE HERE. 
Type CONTACT FAVORITE CITY TOUR to replace the selection. 


14 Click an image placeholder in one of the list-based items. Examine the tag selec- 
tors at the bottom of the document window. 


\ 

CONTACT FAVORITE CITY TOUR 
bHere if | Add NameHere | | | _ AddNameHere | 
pt nibh Cras sit amet nibh ra Cras sit amet nibh : 
avida nulla.) ¢ |) | libero, in gravida nulla. : | ess libero, in gravida nulla. | 
btus | Nulla vel metus ae Nulla vel metus 
ante scelerisque ante i | scelerisque ante 
Cras purus, sollicitudin. Cras purus| { : sollicitudin. Cras purus: | 
ulumin OT) odio, vestibulum in ©; } odio, vestibulum in 

diy div container — div row diy‘ col-ig-4 ul list-unstyled © ff» .media img amr=3 a) 1191x379 v iso 

Ww px ate Alt Ge ge Title ©) 


Note that the <img> element is a child of an <1i> element. 
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15 Select the 1i.media tag selector. 


Add Name Here i ‘Add N 
Cras sit amet nibh libero, in Cras si 
gravida nulla. Nulla vel metus ; WEES, gravida 
scelerisque ante sollicitudin. ; sceleris 
Cras purus odio, vestibulum ini} Cras pl 
vulputate at, tempus viverra vulputa 
turpis. Fusce condimentum a turpis. 

nunc ac nisi vulputate fringilla. nunc aq 
Donec lacinia congue felis in i Donec 


faucibus. to Oe _fauciby 


per =i container div = srow) div ccol-Ig-4 ut Nst-unstyled 1) media Mg mr-3 


pemeeuee Title 


The <li> element is composed of a heading, an image placeholder, and a para- 
graph of text. 


16 Select the ul tag selector. 


The <ul> element comprises one column in the section. You will populate these 
elements with content in a text file. 


, 


17 Open contactus-text.txt from the lesson08/resources folder. 


X contact-us.html’ % contactus-text.txt 


---Item 1--- 
Elaine Rendel 


Elaine is the President and CEO of Favorite City Tour. She has 20-years experience in the 
tours and cruise packages for both individuals and large corporations. 


She's not afraid of diving into a problem. You may find her answering your phone ye 


Email Elaine at: elaine@FavoriteCityTour.com 


The text file opens in Dreamweaver itself. It contains the bios for the Favorite 
City Tour staff. 


18 Select the name Elaine Rendel and copy it. 


19 Switch to contact-us.html. 
Select the text Add Name Here in the first item and paste to replace it. 


= hs 
Cras sit amet nidh libere 

gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. : | 
Cras purus odio, vestibulum in: | | 
vulputate at, tempus viverra | 
turpis. Fusce condimentum | 
nunc ac nisi vulputate fringilla. | 
ea Donec lacinia congue felis in ii | 
faucibus. 


{ 


$06 0125 gravida nulla. Nulla vel metus ° 
i scelerisque ante sollicitudin. 

i Cras purus odio, vestibulum in: 
vulputate at, tempus viverra 
turpis. Fusce condimentum 
nunc ac nisi vulputate fringilla. 
Donec lacinia congue felis in 


faucibus. Z 


ee ee eee oe ae eee iar: 
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Elaine’s name appears in the <h5> element. Next you'll move the three paragraphs 
of Elaine’s bio into the element. But you'll have to learn a new trick for pasting 


multiple elements in Live view. 


Pasting multiple elements in Live view 


Dreamweaver presents some challenges to pasting multiple elements when using 
Live view. If you are used to working in Design view, you'll have to learn a few 
tricks and have a keen eye before you can successfully paste two or more elements. 


1 Switch to contactus-text.txt and copy the three paragraphs under the name 
Elaine Rendel. 


2 Switch to contact-us.html. 
Select the placeholder text under Elaine’s heading. 


Note the orange box around the selection. This indicates you are in text-editing 
mode. This mode does not support pasting multiple paragraphs. If you paste the 
text copied in step 1, it will come in as one continuous block. There’s a simple 
trick to pasting multiple paragraphs in Live view. 


3 Press Delete. 


The placeholder text is deleted. The Element Display may appear on the <h5> 
element. If the border is blue, skip to step 5. 


4 Click the Element Display on the <h5> element. 


The border displays in blue. When an element is selected this way in Live view, 
you can paste one or more elements and preserve the HTML structure. 


5 Press Ctrl+V/Cmd+V to paste. 


doe 


oredia-body 
Elaine Rendel a 
|Elaine is the President and 
CEO of Favorite City Tour. She | 
has 20-years experience in the 
|travel industry and worked at i 
several travel agencies in the 


| 


| 
lpast developing tours and 
loruise packages for both | 
lindividuals and large | 


corporations, 4 
| 
| 
| 


} 


\ 
WOhanta ant abenil al diving Inta 


The three paragraphs copied in step 1 appear below the heading within the <14> 
structure as desired. ‘The first staff bio is complete. Next, you'll create a second row 
to add another bio. 


Creating new list-based items 


If you looked at the structure of the list-based bio, you would quickly see how com- 


plex it is. Since it uses a Bootstrap structure, Dreamweaver provides a simple way 
to create a second row in the first column. 
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1 Select the 1i.media tag selector for Elaine’s bio. 


When this is selected in Live view, you should see the Bootstrap element inter- 
face you used to build the tour descriptions earlier. It sounds counterintuitive, 
but to add a second row you will click the icon labeled Duplicate Column. 


2 Click the Duplicate Column icon i. 


answering your phone callor | : | 
checking outa problem you | : | 
eae ee a have with a reservation. _ H 


Get 


ElaineRendel === 
Elaine is the President and — 


i | dee eas CEO of Favorite City Tour. She | 
' | RDA AES CEO of Kavorite City Tour. She) 
|| 

| 


: : has 20-years experience in the ; 
f travel industry and worked at i 
i} several travel agencies in the | 
i past developing tours and Ties 

cruise packages for both 


has 20-years experience in the i 
travel industry and worked at | i 
several travel agencies in the | : 


An exact duplicate <1i> element appears below the first. Note that the new 
element butts up against the first. Let’s use the .mt-4 class to put a little space 
between them. 


3 Select the li .media tag selector for the duplicate bio. 
Apply the class .mt-4 to the element. 


HAVE ver @ FE OuT vou 


Email Elaine at: 
elaine@FavoriteCityTour.com | 


Email Elaine at: ed 
.  elaine@FavoriteCityTour.com | : 


i ea ES 


"Elaine Rendel im ac 
: Elaine is the President and m Elaine Rendel << soe fe 1G] 
102 125 CEO of Favorite City Tour. She} : Elaine is the President and } 


has 20-years experience in the| : 
travel industry and worked at | : 
several travel agencies in the | 

| past developing tours and 

cruise packages for both 
individuals and laroe 


168328 CEO of Favorite City Tour. She 
has 20-years experience in th 
travel industry and worked at i 
several travel agencies in the 
past developing tours and | 
cruise oackaaes for both | 


The two bios are now separated nicely. 


4 Copy the content from item 2 in contactus-text.txt and replace the text in the 


duplicate bio. 


5 Use the text for items 3 and 4 for the second column. 
Use the text for items 5 and 6 for the third column. 
Create duplicate <1i> elements as needed. 


The six bios are now in place. Note that the list-based section butts up against 
the row of links at the top. Let’s add the .mt-4 class to it. 


6 Select the div.container tag selector. 
Apply the .mt-4 class to the element. 
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© Note: Don't forget 
to type the period at 
the beginning of the 
class name. 


i .media 


® Note: The Bootstrap 
style sheet is formatted 
as read-only. Make sure 
you select favorite- 
styles.css in the pop-up 
window. 


pritica nacbanac far hath 


Finally, we'll add a bit of style to the layout by adding some borders to the indi- 
vidual bios. To make sure the styling is applied only to these employee profiles, 
you'll need to create a custom class that you can assign to them. 


Select the 1i.media tag selector containing Elaine’s bio. 
Click the Add Class/ID icon. 


Type .profile as the new class name. 


As you type, the hinting list appears and displays the names of existing rules. 
The class .profile doesn’t exist yet in the style sheet, but the Element Display 
enables you to create it on the fly. 


Press Enter/Return once. 


Tt media 


Select a source: 


ones een ee Cee eee | Elain [favorite-styles.css | 
progressbar-animated | Bresident and . Flaine cetecicaiey antl 
CEO of Favorite City Tour. She) 100x128 CEO Gl elect a miedia query <I 
has 20-years experience in the has 2 eee 
travel industry and worked at + «travel industry and worked at | 
several travel agencies in the | | several travel agencies in the I} 
past developing tours and | past developing tours and | 
| | 


nritica Naclanac far hath 


The CSS Source pop-up window appears. 


Whenever you enter in the Element Display a new class or id that does not 
exist in a linked or embedded style sheet, the CSS Source pop-up window will 
appear. This pop-up enables you to create a new matching selector in any style 
sheet embedded in the file or linked to it. You can even use it to start a new 
style sheet, if necessary. 


Since the site template is already linked to an external style sheet, 
favorite-styles.css should appear in the Select A Source dropdown menu. 


10 Press Enter/Return a second time. 


Because you pressed Enter/Return again, the selector . profile is created in 
the selected style sheet. If you do not want to create a selector for the class or id 
entered, press the Esc key instead. Once the selector is created, you can use it to 
style the content. 


11 Display the CSS Designer. Click the Current button. 


» Tip: When creating specifications manually, enter the property name in the field and press 


Tab. A value field will appear to the right. When Show Set is enabled hinting may not appear in 
the values field. 


The class . profile appears at the top of the list of selectors. If you look at the 
Properties pane, you can see that no styles are set. 


272 LESSON 8 Working with Text, Lists, and Tables 


12 Enter the following properties for . profile: 
border-left: 3px solid #069 
border-bottom: 10px solid #069 


Files CC Ubraries Insert CSS Designer @ 


Files CC Libraries Insert CSS Designer s 
All Current All Cuyeent 
+ Sources : favorite-styles.css 1 + Properties + Sources : favorite-styles.css | + = Properties 
- bootstrap-4.3.t.css. ( Read Only ) i Show Ser dootstrap-4.3.4.c55. ( Read Only ) i £4 Show Set 
favorite-styles.css i favorite-styles.css : a 
seein re ic * “ : More 
+ — @Media : GLOBAL i a + — @Media : GLOBAL i 
: 1 aio eeue FH 
SLOBAL i — GLOBAL i 
H + Selectors i 
| COMPUTED i 
s 4 . se } ; 
i pe eS ae i 
i media i 
j f * Subefore, *:after i 
fist-unstyled { 
i ol, ut, al i i 
col-ig-4 H callg-4 i 
COL, £012, .cOr3, .col-4, COS, .cO-G, .00... i C01, .c01-2, COS, ot4, COIS, COV6, 0, | 


Current Mode: Lists rules for current sgiextion 


Current Mode: Lists rules for current selection 


Borders appear on the left and bottom of Elaine’s bio. The borders help to visu- 
ally group the bio text under its heading. You can now style the other bios the 
same way. 


13 Apply the class . profile to the other staff bios. 


ne Ts 200 eZ 3 


ne 


Sie SHUT ania UF uivNig possible. 


a cy 
NOW 2 12S 


muentinstance Memnstance 


a problem. You may find her 
answering your phone call or 
checking out a problem you 
have with a reservation. 


Email Elaine at: 
elaine@FavoriteCityTour.com | 


Lainey Harris 

Lainey manages our research 
and development department. 
She researches new tour 
destinations and the service 
at local restaurants, hotels, 
Spas, or other business that 
we recornmend to our 
travelers. 


She listens to your comments 
on our recommendations and 
checks out your complaints. 
You can expect to hear from 


ut ’ ' , a at 


body fmrntinstance editable du 


ou 


VES 


14 Save the file. 


accommodations for existing 
events and classes. So, make | : 
sure Sarah knows if youhave | : 
any special requirements. 


Email Sarah at: ' 
sarah@FavoriteCityTour.com 


Matthew Ridges 1 
Matthew is our do-it-all guy. He. | 
takes care of the business end 
of things. He maintains our 
website and the reservation 
system. He's also experienced 
at helping people complete 
their booking and can step in to 
help when everyone else is 
busy. 


$28 KI2% 


Even though Matthew is good 
with numbers, he's also an avid 
biker and can help you book a 


When you are ready to change | 
the way you move arounda | 
town, give Erica call. 


Email Eric at: | 
eric@FavoriteCityTour.com _ 


Margret Julian eek 
Maggie is our office manager. 
Although she's the youngest | 
member of our staff she is o 
mother hen. She makes sure 
everyone has what they need | 
to do their job at the highest 
jevel. 


You may never meet Maggie | 
but rest assured she is H | 
working hard every second of || | 
the day in the background to 
keep the lights burning, 


Q 1202x563 ~ [SB 


The list-based content section is complete for now. Next, you'll learn how to create 
and work with HTML tables. 
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Creating and styling tables 


Before the advent of CSS, HTML tables were often used to create page layouts. At 
that time, it was the only way to create multicolumn layouts and maintain some 
control over the content elements. But tables proved to be inflexible and hard to 
adapt to the changing internet, as well as just being a bad design choice. CSS styling 
provides so many more options for designing and laying out a Bae that tables 
were quickly dropped from the designer’s toolkit. 


That doesn’t mean tables are no longer used on the web at all. Although tables are 
not good for page layout, they are good, and necessary, for displaying many types of 
data, such as product lists, personnel directories, and timetables, to name a few. 


Dreamweaver enables you to create tables from scratch, to copy and paste them 
from other applications, and to create them instantly from data supplied from 
other sources, including database and spreadsheet programs such as Microsoft 
Access or Microsoft Excel. 


Creating tables from scratch 


In this exercise, you will learn how to create an HTML table. 


1 Create a new page from favorite-temp. 
Save the file as events.html in the site root folder. 


2 Enter Fun Festivals and Seminars to replace the Title placeholder text in the 
Property inspector. 


3 Select the meta description placeholder and type Favorite City Tour supports 
a variety of festivals and seminars for anyone interested in learning more 
about the world around them to replace it. 


4 Switch to Live view, select the ADD HEADLINE HERE placeholder head- 
ing in the text-based section, and type OUR FAVORITE FESTIVALS AND 
SEMINARS to replace it. 


Although the festival and seminars lists will be displayed in tables, it’s always 
nice to introduce such information with a paragraph of text or two. 


5 Select the placeholder text Add content here. 


6 Type the following text: Want to see how the world parties? Want to learn a 
new language? There’s no time like the present. Check out our list of inter- 
national festivals and local seminars. The schedule is updated on a regular 


basis, so you may want to bookmark this page and check it often. Hope to 
see you soon! 


tance | voaio 
= oB OUR FAVORATE FESTIVALS AND SEMINARS 
Want to see how the world parties? Want to learn a new w language? T There’s no time like the pres present. Check out our list of _ 
jj International festivals and local seminars. The schedule is updated on a regular basis, so you may want to bookmark this 
page and check it often. Hope to see you soon} ie eae 
ANN UCANI INE UcDe 
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You are now ready to add a table. 
7 Choose Insert > Table. 

The Position Assist dialog appears. 
8 Select After. 


_ Dreamweaver File Edit View [iimaill Tools Find Site Window 


re Div 8 
Image Xs 
X events.htm!* Paragraph : 
bootstrap-4.3.1.css_ fav__ Heading P spr 


a 


Figure 
a = ie __..... _ Unordered List a 
ticles tater eisai fee Orderedibist a 
OUF tistitem \\ 
a Pes Hyperlink 
vant my cee how the world p Header ue 
iy international festivals and loi Navigation de 
| |page and check it often. Hog Main 
i E Aside C 
The Table dialog appears. 


Dreamweaver 


Xx events.html*® 


“Source Code > bootstrap-4.3.1.css 


File Edit 


Before 


OUR FAVORITE FESTI\ 


“aS 


View In 


a 


= 


favorite-styles.css 


sert Tools Find Site Window 


jquery-3.3.1.minjs popr 


SO 


s? Want to learn a new langua 
2minars. The schedule is updz 
: see you soon! _ 


Although CSS has taken over most of the design tasks formerly done by HTML 
attributes, some aspects of the table may still be controlled and formatted by 


those attributes. The only advantage HTML has is that its attributes continue to 


be well supported by all popular browsers, both old and new. When you enter 


values in this dialog, Dreamweaver still applies 


them via HTML attributes. But whenever you have 


a choice, avoid using HTML to format tables. 


9 Enter the following specifications for the table: 
Rows: 2 Columns: 3 
Table Width: 95% Border Thickness: 1 


You would normally set the border thickness to 0 
(zero), but that setting makes the table structure 
basically invisible in Live view. You will change the 
border thickness later, after the table is complete. 


) Tip: When first creating tables, set the border thickness 


to 1 to make it easier to work with. You can change it to 0 


(zero) after entering data. 


10 Click OK to create the table. 


SoU 


ai TADIE SIZE emma 


Aye ADU uy OoV wuy mov 
Table 
Rows: 2 Columns: 3 
Table width: 95 percent v 


Border thickness: co pixels 


Cell padding: 


Cell spacing: 


f 


| 


Header ————~ 


Caption: 


Summary: 


Accessibility ———————— 


Both 


“Want to see how the world parties? Want to learn a new language? There’s no time like the present. Check out our list of 


' international festivals and local seminars. The schedule is updated on a regular basis, so you may want to bookmark this 


i check it often. Hope to see you soon! 


ANN HEA INE HEDE 
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> Tip: When your 
cursor is in a table cell 

in Design view, pressing 
the Tab key moves the 
cursor to the next cell to 
the right. Hold the Shift 
key before pressing 

the Tab key to move to 
the left, or backward, 
through the table. 


© Note: Design 
view does not display 
complex CSS styling 
properly. 


The schedule is undated on a reaiilar basis so vou mav want to bookmark this nage and check it aften Hone to see vou soon! 
~ ~ —————— ——— - — 95% (1111) + ————— —— ——=- 


| Date 


‘May 1, 2020 


Fe ee 


A three-column, two-row table appears below the main heading. The table is ready 
to accept input. You could enter the data right now, but Live view is not optimized 
for data entry. If you have large amounts of data to enter, you're better off using 
Design view. 

Adding data to a table 

In this exercise, you'll learn how to add data to a table manually. 

1 Switch to Design view. 


2 Insert the cursor in the first cell of the table. 
Type Date and press the Tab key. 


The cursor moves into the next cell of the same row. 
3 Inthe second cell, type Event and press Tab. 


The text appears and the cursor moves to the next cell, but you may find it 
hard to see it. In some cases, you may need to adjust the size of the document 
window. 


4 ‘Type Location and press Tab. 


The schedule is tindated on a reaular basis so vou may want to hookmark this nade and check it often Hone to see vou soon 
— ~ — 95% (1111) * 


= ee ~ 


|Location 


| 


ARN LIF ARI IA UEDE 


‘The cursor moves to the first cell of the second row. 


5 Inthe second row, type May 1, 2020 (in cell 1), 
May Day Parade (in cell 2), and 
Meredien City Hall (in cell 3). 


Event |Location 


iMay Day Parade ‘Meredien City Half 


ANN UCANI ING ucDe 
When the cursor is in the last cell, inserting additional rows in the table is easy. 


Adding rows to an existing table 


Dreamweaver provides several ways to add rows and columns to an existing table. 
In this exercise, you will learn how to add rows to a table. 
1 Press Tab. 


A new blank row appears at the bottom of the table. Dreamweaver also allows 
you to insert multiple new rows at once. 
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Properties 
Table Rows (| W 95% Y 
me Cols 3k 
tel tet toy bl 5 
Te 


Select the <table> tag selector. 


> Tip: If the Property inspector is not visible, select Window > Properties. Dock the panel to 


the bottom of the document window. 


The schedule is iindated on a reauilar basis, so vou may want to hookm 


\Event 
May Day Parade 


AND HEAD! INF HERE 


ark this nade and check it often. Hone to see vou soon! 
95% (1111) > 


Location 
‘Meredien City Hall 


_—— 


CeliSpace Border 


martinatance leinsiance body Raontinstance ectable gv wrapper div container div row div cal-ig- 12 ae thoy t cs | @ 1203x519 v 
i pammmnian -<1Be Within" 95%" borate’ 1" | 
Table wo9S % v  CeliPad Align Defauk ~ Class (None “I : ie 


1 


The Property inspector fields create HTML attributes to control various aspects 
of the table, including table width, cell width and height, text alignment, and so 


on. It also displays the current number of rows and columns and even allows 


you to change the number. 


Select the number 3 in the Rows field. 
Type 5 and press Enter/Return. 


VUR FrAVUR 


Want to see how the world parties? Want to learn a new lan, 


The schedule is undated on a reauilar basis. so vou may w: 


Event 


V¥aiit tO SEE NOW WIE WOrQ Palulies’ vVvalil WO leadiit 4 lew tart 


The schedule is undated on a reaular basis so vou mav wa 


div 


miminstance editable 


mimtinstance flemstance wrapper 


May Day Parade | 


rarntinstance:fileinstance body mimtinstanceeditable diy wrapper ¢ 

.. renee es oe See = see 5 | 

Properties i 

aa Table Rows { 5 W 95 % ve cellP| 

i wa v. Cols 3 r CellSpa 
te 


Dreamweaver adds two new rows to the table. You can also add rows and 


columns to the table interactively using the 


mouse. 
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The schedule is undated on a reaular basis. so vou may want to hookm 


4 


Right-click the last row of the table. 
Choose Table > Insert Row from the context menu. 


The schedule is undated on a reaular basis. so vou may want to bookma 


Date 


Paragraph Format 
List 

Font 

i= Style 

t | CSS Styles 


if 


{ Templates 


Element View 


Paragraph Format 
List 

H Font 

rl Style 

| CSS Styles 


Templates 


Element View 


wom Code Navigator... 


nnn ah LET AAT 


May 1, 2020 


Select Table 


May 1, 2020 


SCE | satccr tave 


7 


vent 
May Day Parade ‘May Day Parade 


a Merge Osis veh 
> Split Cell... NAR SET) Gee 
> 
> 
> Insert Columri 
insert Rows or Columns... 
s Delete Row OEM — 
> Delete Column O8~ 


Another row is added to the table. The context menu can also insert multiple 
rows and/or columns at once. 


Right-click the last row of the table. 
Choose Table > Insert Rows Or Columns from the context menu. 


The Insert Rows Or Columns dialog appears. 


Insert four rows below the selection and click OK. 


Four more rows are added to the table, for a total of 10 rows. 


May Day Parade 


Merae Cais SRM Ss Insert Rows or Columns _ ee 
Split Cell... NOSBT . 


Insert: Q Rows © Columns 
“pas Number of roms CGmai) = 


Where O*bove the Selection : 
a aa 
O Below the Selection C Help) 


insert Row BM 
Insert Column OA 
Insert Rows or Columns... 


Delete Row 
Delete Column O#- 


LUE ABM ED MX 2 BS 


Increase Row Span dntainer 


Inarasca Qatinan Cran LWPV Eres 


die wrapper die container GR > row Gy tal-fg-32 > table! 


Save all files. 


ee schediile is undated on a reaular basis so voi may want to bankmark this nade and check it often Hone to see vou soon! 
SM OVS 
e ~ 


Date (Event Location 


|May 1, 2020 ‘May Day Parade \Meredien City Hall ; 


| 


inatenca fewsiance ey toritinntantecadiaee dv wrapper div) ccontainey di) tow die > colsig-12 table thoy © Pe @ 1203x519 + [RB 


ADD HEADLINE HERE 
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Creating tables from scratch is a handy feature in Dreamweaver, but in many cases 
the data you need already exists in digital form—say, in a spreadsheet or even 
another webpage. Luckily, Dreamweaver provides support for moving such data 
from one page to another or even for creating tables directly from it. 


Copying and pasting tables 


Although Dreamweaver allows you to create tables manually inside the program, 
you can also move tables from other HTML files, or even from other programs, by 
using copy and paste. 


1 


Open the Files panel and double-click festivals.html in the lesson08/resources 


folder to open it. 


This HTML file opens in its own tab in Dreamweaver. Note the table structure— 


it has three columns and numerous rows. 


When moving content from one file to another, it’s important to match views in 


both documents. Since you were working in Design view in events.html, you 


should use Design view in this file too. 
Switch to Design view, if necessary. 


Insert the cursor in the table. 
Click the <table> tag selector. 
Choose Edit > Copy or press Ctrl+C/Cmd+C. 


@ Dreamweaver file 


x events.htim! 


View Insert Tools Find Site Window Help — _B«g 


Cade 


* festival 


Cut BBX ae 
Paste eV 
Paste Special... CRV 


Z Select All BA. — 
eb 21-26, 2020 Select Parent Tag #I 
tMar 13-22, 2020 Select Child 3] 


Close festivals. html. ; 


In events.html, insert the cursor in the table. 
Select the <table> tag selector. 
Press Ctrl+V/Cmd+V to paste the table. 


View insert Tools Find Site Wind @ Dreamweaver File Edit 
Undo eZ ee@ 
Redo BY 
* events.html x events.html* 
Cut xX 


3.3.1l.minjs p 


Source Code 
The schedule is us 


bootstrap Copy “eC jery g Source Code 


‘ou may want to b 


a, | 


Paste Special... LON) | aecncmemamacenae 
Bp aL ae ae Select All 2A 
i Select Parent Tag #[ 
May 1, 2020 ay Parade 
= es Select Child #) ey y 
Code Collapse > y 
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bootstrap~4.3.1L.css 


® Note: Dreamweaver 
allows you to copy 

and paste tables from 
some other programs, 
such as Microsoft Word. 
Unfortunately, copy and 
paste doesn’t work with 
every program. 


View Insert Tools Find Site Windoy 


favorite-styles.css jquery~3.3.1.minJjs POE 


The schedule is updated orf a regular basis, so you may want to be 
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Files CC Libraries Insert 


All Current 
+ - Sources: favorite-styles.... + Properties 
bootstrap-4,3.4.css ( Read Only } fio [r) (am fs] (7) Show Set 
favorite-styles.css 
[== 
fe Layout 
+ @Media : GLOBAL 
width 
GLOBAL height 
+ — Selectors minewidth 
£P Filter OSS Rules min-height 
body max-width 
footer max-height 
address OCURY 
SSeS box-sizin 
| table 1 ue 
r All Mode: Lists rules for entire document 
»> 
Files CC Libraries insert CSS Designer = 
All Current 
+ — Sources: favorite-styles... + — Properties 
src) 2 4 { >; _ 
bootstrap-4.3.1.css { Read Only ) fo es | cE] (] Show Set 
favorite-styles.css al | 
Text 
+ @Media ; GLOBAL 
color eS 
GLOBAL ES 
font-family 
+ — Selectors font-style 
iepy font-variant 
font-weight 
nav .container vel Eee 
font-size : | 90% 
body [9094 Se i 
line-height 
footer EE oes 
text-align = = 
ecciess text-decoration : NOT T & 
table ‘ ot 
ext-indent 
All Mode: Lists rules for entire document 
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The new Festivals table completely replaces the existing table elements. This 
workflow will work in Design and Code views. But you must match views in 


both documents before you copy and paste. 


6 Save the file. 


If you look carefully at the text in the table, you can see that it appears larger than 
the text in other parts of the page. This usually indicates that the default Bootstrap 
styling has its own set of CSS properties. In cases like this, you'll want to override 


the defaults and set your own properties. 


Styling tables with CSS 


In this exercise, you will create CSS styling for the content of the table. 


1 Switch to Live view. Click the table. 


Select the table tag selector. 


CSS Designer 


2 Inthe CSS Designer, click the All button. 


Select favorite-styles.css in the Sources pane. 
Create a new selector: table 


The text in the table is larger than the other 
text on the page. You can use the new rule to 
control the size of the text. 


3 If necessary, deselect the Show Set option. 
4 Click the Text category icon (TI. 


5 Create the following property for the rule 


table: font-size: 90% 


The text in the table reduces in size. When 
you set the width property as a percentage, 
the browser allocates the space based on the 
size of the parent element—in this case, the 
containing <div> element. This means the 
table will adapt automatically as the parent 
structure changes too. 


CSS can control all aspects of the table format- 
ting. When creating properties, you can use 
the extended interface in CSS Designer or you 
can enter properties manually. Once you get 
comfortable with the CSS specifications, this 
method can be much faster and more efficient. 


6 Select the Show Set option. 


Biles ce Libraries tnsert CSS Designer : bd 
All Current 

+ — Sources: favorite-styles.... - + — Properties 

bootstrap-4.3.1.c8s ( Read Only } (z) 8 tJ e) Show Set 
=; [) Text 


i color 17% 
| font-family 
| font-style 

i font-variant 
font-weight 


header h2 
header p ) dine-height 
header text-align , SS == 
nav .container | textdecoration - NT TS 
body : textindent 
(ees © text-shadow 
add 

a h-shadow 

v-shadow 


All Mode: Lists rules for entire document 


Files CC Libraries Insert CSS Designer < ae | 


All Current 


+ — Sources: favorite-stytes.... 
bootstrap-4.3.1.c88 ( Read Only ) 
eepoeri se: 


+ @Media : GLOBAL 
SGLOBAL eae 


+ — Selectors 


PD Filter CSS Rules ¢ wate vals 
eNavoarnay inavacem : | 


header h2 
header p 
header 

fav container 
Dae 


footer 


address 
table 


All Mode: Cists rules for entire document 


The Property pane now filters the properties showing only options that are set 
within the rule. At the bottom of the Properties pane is a field labeled More. 
New properties have to be entered manually into this field. 


7 Typewidth: 95% into the field and press 
Enter/Return to create the property. 


The table resizes, assuming 95% of the width of 
its parent element. 


8 Create the following properties in the rule 
table: 
margin-bottom: 2em 
border-bottom: 3px solid #069 
border-collapse: collapse 


A blue border and an extra space are added to 
the bottom of the table. 


9 Choose File > Save All. 


The rule you just created formats only the overall 
structure of the table, but it can’t control or format 
the individual rows and columns. In the next exer- 
cise, you will turn your attention to a table’s inner 
workings. 


é 
/ Files CC Libraries insert CSS Designer = 


All Current 
+ —- Sources: favorite-styles.... + 
bootstrap-4.3.1.css_ ( Read Only ) 
— @Media : GLOBAL 
GLOBAL | 


+ — Selectors 


& Filter CSS Rules 


footer 
address 
table 
All Mode: Lists rules for entire document 
»> | 
Files CC Libraries fnsert CSS Designer p= 
All Current | 
| 
+ — Sources: favorite-styles.... + — Properties | 
bootstrap-4.3.1.css ( Read Only ) {r) fs] Show Set { 
favorite-styles.css | 
[z) Text i 
a @Media : GLOBAL t | 
' font-size : 90% 
GLOBAL 
+ — Selectors f=] More 
LP Filtor CSS Rut | width > 95% 
oes margin-bottom : 2em 


nav .container 


border-bottom ; 3px solid #069 


body “border-collapse + | collapse 
footer : <7 collapse 
address Y 
table 


All Mode: Lists rules for entire document 
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® Note: Remember 
that the order of the 
rules can affect the 
style cascade, as well as 
how and what styling is 
inherited. 


» Tip: If the Property 
inspector does not 
display table properties 
at first, try selecting a 
different tag selector 
and then click back on 
the table tag selector. 
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Styling table cells 


Just as with tables, column styling can be applied by HTML attributes or CSS rules. 


Formatting for columns can be applied via two elements that create the individual 
cells: <th>, for table header, and <td>, for table data. 


It’s a good idea to create a generic rule to reset the default formats of the <th> and 


<td> elements. Later, you will create custom rules to apply more specific settings. 


1 Create a new selector in favorite-styles.css: 
td, th 


By adding a comma, the selector targets both tags. Since td and th elements 
have to be in tables anyway, there’s really no need to put table in the 


selector name. 


2 Create the following properties for the new rule: 
padding: 4px 

left 

1px solid #069 


text-align: 
border-top: 


Files CC Libraries insert CSS Designer = 


All Current 
+ — Sources: favorite-styles.... + Properties 
bootstrap-4.3.1.css ( Read Only ) Show Set 
favorite-styles.css 
: [=] More 
+ @Media > GLOBAL 
padding 
GLOBAL - 
text-align > feft 
pa 
+ — Selectors border-top + | 1px solid #069] j 
P Fitter CSS Rule * 
auuless 
fable 
th, td 


Ail Mode: Lists rules for entire document 


Once you've added a border to the rows, the HTML border attribute is no 
longer needed. 


3 Select the table tag selector. 


| Want to see how the world parties? Want to learn a new language? There’s no time like the present. Check out our list of 
| international festivals and local seminars. The schedule is updated on a regular basis, so you may want to bookmark this 
nd check it often. Hone to see you soon! 


Event Location 


Carnivale Di Venezia Venice ~ Italy 


= _ Mardi Gras New Orleans, Louisiania - USA 
: Holi Mumbai, Dehli - India i 
Rio Carnival Rio De Janeiro - Brazil | 


The Properties panel should display the table properties. If you do not see the 
table properties, click the tag selector until you see them. 
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4 Change the border value to © (zero) in the Property inspector. 


As you format the table, the concept is to make the data easier to read and find. 


Adding header rows to tables 


Long columns and rows of undifferentiated data can be tedious to read and hard to 
decipher. Headers are often used to help the reader identify data. In some brows- 
ers, the text in header cells is formatted in bold and centered by default to help it 
stand out from the normal cells. But this default styling is not universally honored, 
so don’t count on it. You can make the headers stand out by giving them a touch of 
color of their own. 


1 Create a new rule: th 


2 Create the following properties in the 


Files CC Libraries fsert CSS Designer 


rule th: All | Current 
color: #FFC + — Sources: favorite-styles.css + ~— Properties 
text-align: center pectemapcecee ence se | 
border-bottom: 6px solid #046 + — @Media: GLOBAL ae 
background-color: #069 ee lee 

The rule is created, but it still needs to be a ae nein a 
applied. There are no headers in the table — 

yet. Dreamweaver makes it easy to convert a 

existing <td> elements into <th> elements. His 


3 Click the first cell of the first row of the table. 
In the Property inspector, select the Header option. 
Note the tag selector and Element Display. 


IE SHIGE IR UT CEE Pre bY Bee YUU suUin 


td 


Date 


jEvent 


© Note: The stand- 
alone th rule for the 
<th> element must 
appear after the rule 
styling th and td 
elements in the CSS or 
some of its formatting 


will be reset. 
cS) 
Show Set 
: $FFC 
: center 
: Opx solid #046 
peer LS 


All Made: Lists rules for entire document 


Feb 2-25, 2020 Carnivale Di Venezia Feb 2-25, 2020 


Carnivale Di Venezia 


i Feb 25, 2020 Mardi Gras ' Feb 25, 2020 Mardi Gras 
cal-Ig 
Properties TGs Properties 
Format None v Clas v) neues f Format None v Class Cone ¥) 
WOW wane = Link = Ba, CSS IDS None c Link 

=e Cell Horz Default ~ Ww Nowrap[} 89 ie mm) Cell Horz Default » Ww Nowrap{} 8 call 

+t =" Ov a a 
aan JE Vert Default » #H Header XY mam JE Vert pefauit ne LH Header 9 

Katee me 


The cell background is filled with blue. The Element Display changes from the 
td element to th. 


When you click the Header checkbox, Dreamweaver automatically rewrites the 
markup, converting the existing <td> tags to <th> and thereby applying the 
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CSS formatting. This functionality will save you lots of time over editing the 
code manually. In Live view, to select more than one cell, you have to use the 
enhanced table-editing function. 


4 Select the table tag selector. 


The Element Display appears focused on the table element. To enable the 
special editing mode for tables, you must first click the sandwich icon in the 
Element Display. 


5 Click the sandwich icon =] 


Feb 2-25, 2020 Carnivale Di Venezia 


Mardi Gras 


When you click the icon, Dreamweaver enables an enhanced table-editing 
mode. Now you can select two or more cells, entire rows, or columns. 


6 Click the second cell of the first row and drag to select the first row. 


7 Inthe Property inspector, select the Header option to convert the table cells to 
header cells. 


The whole first row is filled with blue as the table cells are converted to 
header cells. 


8 Save all files. 


Controlling table display 


Unless you specify otherwise, empty table columns will divide the available space 
between them equally. But once you start adding content to the cells, all bets are 
off. Tables seem to get a mind of their own and divvy up the space in a different 
way. In most cases, they'll award more space to columns that contain more data, 
but that’s not guaranteed to happen. 


To provide the highest level of control, you'll assign unique classes to the cells in 


each column. Creating them first makes it easier to assign them to the various ele- 
ments later. 


1 Choose favorite-styles.css. 
Create the following new selectors: 
-date 
event 
- location 
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Files CC Libraries insert CSS Designer = 
All Current 
+ — Sources: favorite-styles.css + Properties 
bootstrap-4.3.1.css (Read Only ) i Show Set 
favorite-styles.css 
: ; EJ More 
+ @Media : GLOBAL 
GLOBAL i 


+ — Selectors 
P Filter CSS Ruies 

th, td 

th 

date 

event 

Jocation 

Ls 


All Mode: Lists rules for entire document 


Three new rules appear in the Selectors window but contain no styling informa- 


tion. Even without styling, the classes can be assigned to each column. Dream- 


weaver makes it easy to apply classes to an entire column. 


2 Using the enhanced table-editing mode, position the cursor at the top of the 
first column of the table. 
Click to select the entire column. 


Mar 9-10, 2020 


Mmtinstance editable div 


The column borders turn blue, indicating that the column is selected. 


3 Click to open the Class menu in the Property inspector. 


@ Note: If you have 
difficulty working with 
tables in Live view, you 
can perform all these 
actions in Design view. 


wrapp 


A list of classes appears in alphabetical order. Since the Bootstrap style sheet is 


linked to this page, the list of selectors and classes will be very long. 


4 Choose date from the list. 


d-md-table-row 


page and check it often. Hope to see you soon! 


cy + | 
d-none 
' d-sm-block 
| |\Feb 2-25, 2020 Carnivale Di Venezia d&em-flex } Feb 2-28, 2020 ne? 
Mardi Gras d-sm-inline Feb 25, 2020 


Mar 9-10, 2020 d-sm-inline-block aes 


Mar 9-10, 2020 
d-sm-inline-flex a Sess 


Feb 21-26, 2020 


Feb 21-26, 2020 Rio Carnival 
i d-sm-none 
Mar 13-22, 2020 d-sm-tablo Mar 13-22, 2020 _ 


d-sm-table-cell 
d-sm-table-row 
d-table 


Properties 


Forntat 
Rem Borie None d-table-cell be = 

1D 
Be css None - tablerow BB Css None 
Bei oO ime SC Vert potent 
far Vert nefault ~oH t a ofisial 
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format None 


Carnivale Di Venezia 


Mardi Gras 


Holi 
Rio Carnival 


No wrap [j 


Header 
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The cells in the first column should now have the class . date applied to them. 
But after applying the class to the first column, you may notice that Dream- 
weaver has returned the table to normal mode again. 


@® Note: Even if you 5 Select the table tag selector. 
apply a width that’s too Click the sandwich icon Ej in the Element Display. 
narrow for the existing 


Apply the event class to the second column. 
content, by default PPty, 


a cell can’t be any 6 Repeat step 5 to apply the . Location class to the remaining column. 
smaller than the largest ; : 
single word or graphic Controlling the width of a column is quite simple. Since the entire column must 
element contained be the same width, you can apply a width specification to only one cell. If cells 
as in a column have conflicting specifications, typically the largest width wins. 
Since you just applied a class to each column, any settings added to the class 
will affect every cell in that column. 
: i rule .date: 
Files CC Libraries insert CSS Designer pes 7 Add this property to the we 
All Current wi dth $ 25% 
ee ee The Date column resizes. In this case, the 
bootstrap-4.3.1.css { Read Only } ria fF f& Show Set 
favarite-styles.css = parent of the Date column is the <table> 
Layout ‘ = 
Bi Ae A ei sie cx |e element itself. It will occupy 25 percent of 
GLOBAL hn : 
a * the overall table width. In turn, the remain- 
+ — Selectors More i 
D Fitter C88 = : ad ing columns automatically divvy up the 


th, td 


space left over. 
th 


date 


8 Add the following property to the rule 
sevent 
Jocation .location: width: 30% 


All Mode: Lists rules for entire document 


The Location column resizes to a width of 30 percent of the entire table. Since 


the outer two columns have specific widths set, there’s no need to set the width 
of the Event column. 


9 Save all files. 


Now, if you want to control the styling of the columns individually, you have the 
ability to do so. Note that the tag selectors and the Element Display show the class 
names for each cell, such as th. location or td. location. 


Inserting tables from other sources 


In addition to creating tables by hand, you can also create them from data exported 
from databases and spreadsheets. In this exercise, you will create a table from data 
that was exported from Microsoft Excel to a comma-separated values (CSV) file. 
The import feature does not work in Live view. 


1 Switch to Design view. 


Insert the cursor in the existing Events table. 
Select the table tag selector. 
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Press the right arrow key. 


In Design view, this technique moves the cursor after the closing </table> tag 


within the code. 


3 Choose File > Import > Tabular Data. 
The Import Tabular Data dialog appears. 
4 Click the Browse button and select seminars.csv from the lesson08/resources 
folder. Click Open. Comma should be automatically selected in the Delimiter 
menu. 
5 Enter the following values in the Import Tabular Data dialog: Table Width: 95% 
Border: 0 
@ Dreamweaver Edit View Insert Tools Find Site Window Help insert Tools Find Site Window Help 
eee peace a. import Tabular Data De: 
* events.hton® Open Recent > a re Sot eS 
he) Source Code bx (Sacn sew fouery-3.3.L.mings popperminj ist Dara files {s/l lecninars.csv) \ 
¢, Sem Close All 99) REELS > Delimiter. Comma ¥ 
: . r yA eeu taeremen = 
~ Pat AS... a E FES IVAL \ Table width: QO Fit to data 
Save All © serto; 95 Percent v 
Want to see hor Save All Related Files anew language? There’s no EK Sa eee 1b Gat REISER em AS So put 
: Save as Template... Cell padding: Format tap raw: [No Formatting] ~ 
festivals and loc ited on a regular basis, so yo ; pz 
Revert Cell spacing: Border. 0 


to see you soor 
Attach Style Sheet... 


Export 


— 


iFeh 9-95 2n20 


Print Cade.. BP via 


Yarnivale Ni Venezia 


Although you set the width in the dialog, as you did for the Events table, 
remember that the table width will actually be controlled by the table rule cre- 


| 
(| 
BVfaniee ~ italy 


ated earlier. HIML attributes will be honored in browsers or devices that do not 


support CSS, although this is rare. Because this is the case, make sure that the 


HTML attributes you use don’t break the layout. 
6 Click OK. 


Ve Lup wiueiwe (vay Ur Hie Ucauy 


rol — Austria 


Dec 5, 2020 


Seminar 


Learn the basics of getting along in France. Learning some 


12 
|: French for travelers 
| basic phrases can melt a lot of barriers weeks 
= a. — ae 2 ssi oie eee ae 
Learn how to make money doing the thing you love most: Traveling. Magazines, newspapers and \ 
Travel writing 101 websites all need good travel stories. Learn how to find unique stories, create a slant, and how to F 
weeks 


market them. Taught by a professional travel writer. 


Are your travel pix flat, drab and ugly? Take your photos up to the next level, Learn the tricks the pros | 4 


me 


| Travel Photography 


a) 


1014 x 


|Length | Day | Cost 


SSS pa 


$60 


|$32 


$19 


0 


(Sb 


A new table—containing a seminar schedule—appears below the first. Note that 
the first row of the table is a header row. In Design view you can select table 


rows and columns directly. 
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7 In the Seminars table, position the cursor near the left edge of the first row. 


Krampusnacht Dec 5, 2020 


u. 


{Dec 5, 2020 


+ Seminar 

| Get a drink, get a meal and get a room. Learn th 
| French for travelers | ; 
| | basic phrases can melt a lot of barriers. 


| 


| French for travelers | 
| 


i Krampusnacht 


| Get a drink, get a meal and get a room. Learn th 


basic phrases can melt a lot of barriers. 
| 


Learn how to make money doing the thing you | 


| 
Travel writing 101 websites all need good travel stories. Learn how 


| Travel writing 104 


rence filminstance 


as 


| Learn how to make money doing the thing you Ic 


| websites all need good travel stories. Learn how 


body funtinstance editable div thy container 


body mmtinstancereditable dis div diy 


A black arrow should appear at the edge of the row. Note that the first row is 
highlighted with red borders. 


8 Click to select the first row. 


9 Click the Header option in the Property inspector. 


95% (940) ~ 
pa 


ee 


Description 


| Get a drink, get a meal and get a room. Learn the basics of getting along in France. Learning 


French for travelers | 
i 


basic phrases can melt a lot of barriers. 


eR, 
ramtingstance fleinstance body munitinstancereditable div div container div row tiv © .col-lg-12 table ee 
rae 
Properties : 
Format None v Class (None 9) Buf sao: = = Title 
None vy. 


ID Link Bis Target 


mem) Cell Horz Default a Nowrap(] Bg | J Page Prag 
Om 
Sane Vert Default viieH Header & 


The header cells now display in blue with reversed text. The new table is complete. 


Semantically, the two tables do not relate to each other. Although human visi- 

tors may be able to distinguish where one table ends and another begins, adding a 
semantic structure to your content makes it easier for search engines and assistive 
devices to derive sense from the content. The tables should each be placed in their 
own separate HTML structures. 


Creating semantic text structures 


Adding semantic structures should be your goal whenever possible. This is encour- 
aged not only to support accessibility standards but also to improve your SEO 
ranking. In this exercise, you will insert each table into its own <section> element. 


1 Select the table tag selector for the Festivals table. 
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2 Choose Insert > Section. 


Select Wrap Around Selection from the Insert menu. 


Click OK to insert the <section> element. 


totonesnontincecoeawannesanneenscsensanonssacnvene~scaveseanennnnannswasensnevananasecasavasssasssanecsescerecsesesl' eye 
Satsneanang fescccccsecncecceccnccnnnscccsccscccccoccescnc ncaa sss nco enn ee etre nnn et bene nen eer ee enon eens ees 


Insert: Wrap around selection v 
i Pecirereenrs 
; Class: | v 


} 1D: bs 


New CSS Rule 


Insert Section 


ae peneennet & Banc 


The Festivals table is inserted into a <section> element. You should be able 
to see the new element in the tag selector interface. Now, let’s take care of the 


Seminars table. 


Select the table tag selector for the Festivals table. 


Choose Insert > Section. 
Select Wrap Around Selection from the Insert menu. 
Click OK to insert the <section> element. 


Both tables are now in their own <section> elements. 


The Seminars table has two more columns than the Festivals table. The text is 


wrapping awkwardly in the last three columns. You will fix this display issue by 


creating some additional CSS classes. 


5 Inthe CSS Designer, create a new selector: .cost 
Add the following properties: 
width 10% 
text-align: center 


Files CC Libraries Insert CSS Designer 


ti 


All Current 

+ — Sources ;: favorite-styles... + — Properties 
bootstrap-4.3.1.css ( Read Only ) Show Set 
favorite-styles.css 

+ @Media : GLOBAL Le hi 

width : 10% 

OE text-align 

+ — Selectors (ge const 
& Filter CSS Rules 

thi 

date 

.event 

Jacation 

-cost 


All Mode: Lists rules for entire document 
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6 Inthe Seminars table, select the Cost column. 
Apply the class . cost to the selection. 


So COKE 
pmmnonesommemimemam  CO|-x]-3 
stamealand getaroom. col-xl-4 
can melt alot of barriers col-x1-S 
Siaan EE CORKI-O Ge 
make money doing the th cOLxk7 
sed good travel stories. Ly 4g $240 
Tauaht by a professional SED) 
—  Colcleanita | 
| pix flat. drab and ualv? collapse 
collapsing 
“ container @ 1108x519 


container-fluid 


custom-checkbox 


The Cost column widens noticeably. We can use the same specifications on the 


other two columns, but you'll make custom rules for each one. 


In CSS Designer, right-click the rule . cost. 
Choose Copy All Styles from the context menu. 


Create a new selector: . length 
Right-click the new selector. 
Select Paste Styles from the context menu. 


} [itength 


dength 2 
Go to Code patire dox HASTEN Go wa Code uM 9 1 
DOM — Copy All Styles S{ DOM Aseer = DOK 
Copy Siyles > | 
i | Paste Styles 
Duplicate Duplicate 


to Cod 
Go to Code All Mode: Lists rales for entire document 
DO Copy All Styles DOM Assets Snippers i a 
Copy Styles > posse 
Tey 
> t 
Cintas © 
» 2 
> ft, 


“eek 


The new rule now has the same styling as the . cost rule. 


Repeat step 6 to apply the Length class to the Length column in the 
Seminars table. 


Dreamweaver also provides an option for duplicating rules. 


Right-click the rule . Length. 
Choose Duplicate from the context menu. 
Enter .day as the new selector. 
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11 Apply the . day class to the Day column in the Seminars table, as in step 6. 


By creating and applying custom classes to each column, you have the means 

to modify each column individually in the future. You need to make two more 
rules: one to format the Seminar column and the other to format the Descrip- 
tion column. 


12 Duplicate the rule .date. 
Enter .seminar as the new rule name. 


13 Duplicate the rule . event. 
Enter .description as the new name. 


At the moment, these rules have no styling properties assigned to them. But you 
can use them in the future to control all aspects of these columns. 


14 Apply the . seminar class to the Seminar column. 


| French for travelers 


Learn how to make money doing the thing you love most: 


Traveling. Magazines, newspapers and websites all need good | 1 | 


Travel writing 101 | 4Aweeks | F 1 $240 i 
travel stories. Learn how to find unique stories, create a slant, i | | | 
col-lg-12 Bee @ 1108x519 


Format None - Title 


iD 


None v 


All columns in both tables now have custom CSS classes assigned to them. 


15 Save all files. 


Tables should have descriptive titles or captions that help visitors and search 
engines differentiate between them. 


Adding and formatting caption elements 


The two tables you inserted on the page contain different information but don't 
feature any labels or titles. Let’s add a title to each. The <caption> element was 
designed to identify the content of HTML tables. This element is inserted as a child 
of the <table> element itself. 


1 Open events.html in Live view, if necessary. 
Make sure the document window is as least 1200 pixels wide. 


2 Insert the cursor in the Festivals table. 
Select the table tag selector. 


Note the color of the element display. If the border is blue, you can skip to step 4. 
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3 Click the Element Display. 
The border of the Element Display changes to blue. 
4 Switch to Code view. 


By selecting the table first in Live view, Dreamweaver automatically highlights 


the code in Code view, making it easier to find. 


5 Locate the opening <table> tag. 
Insert the cursor directly after this tag. 


6 Type <caption> or select it from the code-hinting menu when it appears. 


7 Type 2020 INTERNATIONAL FESTIVAL SCHEDULE and then type </ to close 
the element, if necessary. 


*% events.html* 
“Source Code ©  bootstrap-4.3.1.css__favorite-styles.css © jquery-3.3.d.minjs  popper.min.js _ bootstrap-4.3.1js 


festivals and local seminars. The schedule is updated on a regular basis, so you m 
Hope to see you soon!</p> 
<section> 
<table border="0"><caption>2020 INTERNATIONAL FESTIVAL SCHEDULE</caption> 
<tr> 
<th class="date">Date</th> 


8 Repeat steps 2 through 6 for the Seminars table. 
Type 2020 SEMINAR SCHEDULE and then type </ to close the element, if 
necessary. 


<section> 
<table width="95%" border="0"><caption>2020 SEMINAR SCHEDULE </caption> 

<tr> 
<th class="seminar'>Seminar</th> 
<th class="description">Description</th> 
<th class="length">Length</th> 
<th class="day">Day</th> 
<th class="cost">Cost</th> 

</tr> 


9 Switch to Live view. 


| Nov 2, 2020 Loy Krathong & Yi Peng Chiang Mal 


Krampusnacht Tyrol — Aug 


| 12020 INTERNATIONAL FESTIVAL SCHEDULE 


Seminar Description Length 


Get a drink, get a meal and get a room. Learn the basics 
French for travelers of getting along in France. Learning some basic phrases 2 weeks 
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The default captions appear at the bottom of the tables and are relatively small 
and understated. The captions are lost amid the color and formatting of the 
table. Let’s beef them up a bit with their own custom CSS rule and move them 
up to the top of the tables. 


10 Create a new selector: table caption 


11 Create these properties for the rule table caption: 
margin-top: 20px 
padding-bottom: 10px 
color: #069 
font-size: 160% 
font-weight: bold 
line-height: 1.2em 
text-align: center 
caption-side: top 


events.dytrnt® 


files CO Ubraries insert CSS Designer 


GurceCode® bootstrap-4.3.1.c55  favorite-styles.css* — jquery-3.3.4.minjs —_ popperminjs _ bootstrap=4.3.1, noe 
werent 
+ — Sources: favorite-stylescss + Properties 
F bootstrap-4.3.1.c55 ( Read On'y ) 
‘ Get a Quote i é ook a Tour + @Media: GLOBAL FE More 
é E — margin-top : 2px 
OUR FAVORATE FESTIVAI = fo 
+ = Selectors Color : 
' Want to see how the world parties? Want to learn a new language? There’s no ti f i — < ee 
‘ 3 > font-weigh’ 
| local seminars. The schedule is updated on a regular basis, so you may want to ne-het 
ight 
text-atign 
are : : baie we. caption i 
2020 INTERNATIONAL FES? 
; amisar 
Feb 2-25, 2020 : Carnivale Di Venezia table caption 
Feb 25, 2020 Mardi Gras H All Mode: Lists rules for entise document 


The captions now appear at the top of the tables, sufficiently large and 
impressive. 


12 Save all files. 


Formatting the tables and the captions with CSS has made them much easier to 
read and understand. Feel free to experiment with the size and placement of the 
captions and with the other specifications affecting the tables. 


Spell-checking webpages 


It’s important to ensure that the content you post to the web is error-free. Dream- 
weaver includes a robust spell-checker capable of identifying commonly misspelled 
words and of creating a custom dictionary for nonstandard terms that you might 
use on a regular basis. 


1 Open contact-us.html, if necessary. 


2 Switch to Design view. Insert the cursor at the beginning of the heading 
CONTACT FAVORITE CITY TOUR. Choose Tools > Spell Check. 


$3 Show Sex 


© Note: The spell- 


checker runs only in 
Design view. If you are 
in Code view or Live 
view, the command will 


be grayed out. 
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The spell-checker starts wherever the cursor has been inserted. If the cursor 
is located lower on the page, you will have to restart the spell-checker at least 
once to examine the entire page. It also does not check content locked in non- 


editable template regions. 


The Check Spelling dialog highlights the word Rendel, which is the CEO’s last 
name. You could click the option Add To Personal to insert the word into your 
custom dictionary, but for now you will skip over other occurrences of the name 


during this check. 
3 Click Ignore All. 

Dreamweaver’s spell-checker highlights Elaine’s name in her email address. 
4 Click Ignore All again. 


Dreamweaver highlights the domain for the email address 
elaine@FavoriteCityTour.com. 


5 Click Ignore All. 


Dreamweaver highlights Lainey’s name.-For real names in your own company or 
website you may want to click the Add button to insert the names permanently 
into the dictionary. 


6 Click Ignore All. 
Dreamweaver highlights the word busines, which is missing an s. 


7 To correct the spelling, locate the correctly spelled word (business) in the Sug- 
gestions list and click Change. 


Check Spelling 
Word not found in dictionary: 


busines 


Change to: business 


5 ‘ SugGesttoniss: If crete cement nan] 
the lites end of thing ons 


business 


in to help when everyone | busings 
| bu sines 
he's also an avid biker a SUS 
bushiness 
rcom Se ae cece ane eee eS 
ERE 


8 Continue the spell-check to the end. 


Correct any misspelled words and ignore proper names, as necessary. If a dialog 
prompts you to start the check from the beginning, click Yes. 


Dreamweaver will start spell-checking from the top of the file to catch any 
words it may have missed. 


9 Click OK when the spell-check is complete. 
Save the file. 
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It’s important to point out that the spell-checker is designed to find only words 
that are spelled incorrectly. It will not find words that are used incorrectly. In those 
instances, nothing takes the place of a careful reading of the content. 


Finding and replacing text 


The ability to find and replace text is one of Dreamweaver’s most powerful features. 
Unlike other programs, Dreamweaver can find almost anything, anywhere in your 
site, including text, code, and any type of whitespace, like line breaks and indents, 
that can be created in the program. You can search the entire markup, or you can 
limit the search to the rendered text or to the underlying tags. 


Advanced users can enlist powerful pattern-matching algorithms known as regu- 
lar expressions to perform sophisticated find-and-replace operations. And then 
Dreamweaver takes it one step further by allowing you to replace the targeted text 
or code with similar amounts of text, code, and whitespace. 


If you are a user of older versions of Dreamweaver, you will see some significant 
changes in the Find And Replace function. 


In this exercise, you'll learn some important techniques for using the Find And 
Replace feature. 


1 Open events.html, if necessary. 


There are several ways to identify the text or code you want to find. One way 

is to simply type it in the Find field. In the Seminar table, the word visitor was 
used. The word traveler is a better choice. Since visitor is an actual word, the 
spell-checker won't flag it as an error and give you the opportunity to correct it. 
So you'll use Find And Replace to make the change instead. 


2 Switch to Code view, if necessary. 
Choose Find > Replace In Current Document. 


@ Dreamweaver File Edit View Insert Tools Site Window Help B® @ Bt 


Find in Current Document... 36F 
22° Find and Replace In Files... OF . 


*% events.html* 


B Source Code) bootstrap-4.3.1.css__favorite-styles.css  j | ‘Find Next 386 

Z Find Previous CEG 
7 
: Favorite City Tour 


The Find And Replace panel appears at the bottom of the document window. If 
you have not used the feature before, the Find field should be empty. 
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3 Type visitor in the Find field. 


fltalian Tor visitors i 
i j Malian, Leaning some basic phrases « ey at a lot of barriers. 
ig seeresiee sssrsssssad RARER S SES EES a 

g 


Environmental consciousness is rising everywhere. Many ‘-». 
# concerned about their ecological footprint and want to minimize or eliminate 


Low Impact Travel 


Syeteahtersnesrenenneasnesieaesiosecetst| 


their impact. We have several experts who will detail the various steps you 


"day">We/td> 
="cost">$60 </td> 


6s="seminar">Low Impact Travel</td> 

<td class="description">Environmental consciousness is rising everywhere. Many Wisit6s are concerned about their ecological footprint and want to 
minimize or eliminate their impact. We have several experts who will detail the various steps you can take to do this.</td> 

328 <td class="length">3 weeks</td> 


VF, visitor fany tag] ~- @© pb 909 X 
[a 


| 


merntintance Bieinstance boy MAinsancs editable dw id or Gig col-ig~12 sections ibis w té ~~ description @ HM v 1204x374 ~ INS 327:105 (sb 


Dreamweaver finds the first occurrence of visitor and indicates how many 
matches it has found in the document. 


4 Type traveler in the Replace field. 


“eZ weeks 


[ FRalian for vistors q 
q aan. earring some esc Dees, oo. melt a lot of barriers. 


‘vironmental consciousness is rising everywhere. Many i: are 


concerned about their ecological footprint and want to minimize or eliminate 3 ‘ 
wee! 


eit impact. We have several experts who will detail the various steps you 


seminar">French for WisitOrs</td> 
="description">Get a drink, get a meal and get a room. Learn the basics of getting along in France. Learning some basic phrases can melt a lot of 
barriers. </td> 


<td class="length">2 weeks</td> = 
day">M</td> = 
cost">$60 </td> 7 
YF, visitor fany tag} -~ 4 [Dp] 10s x 
@ HTML ¥ 1204x374 ¥ INS 23557 [BB 


5 Click Replace. 


Italian for Itt bey a drink, get a meal and get a room. Learn the basics of g¢ 


Italian. Learning some basic phrases can melt a lot of Pali 


314 <td class="length">4 weeks</td> 
315 <td class="day">Th</td> 
<td class="cost">$100 </td> 
317 </tr> 
8 <tr> 
<td class="seminar">Italian for travelers</td> 


Sh %, visitor i 


traveler 


mrotinstance:fileinstance body mmtinstance editable . div” div div div <col-lg~12 section table 
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Dreamweaver replaces the first instance of visitor and immediately searches for 
the next instance. You can continue to replace the words one at a time, or you 
can choose to replace all occurrences. 


6 Click Replace All. 


Vv WT. visitor {any tag] Me 4 > 1of6 X 
traveler Replace ) Replace All) 
imtinstance:editable av .. dive .. Saw... aw? . Staple tr @ HTML + = 382x107» INS 211:84 [so 
Search Output Git : oo) 


{> Done. 6 items found, 6 replaced in the current document. 


File t ‘Line Matched Text 

s 140 <td>German for travelers </td> 

6 161 <td>Spanish for travelers </td> 

® 175 <td>Chinese for travelers</td> 

e 189 <td>Japanese for travelers </td> 

6 203 <td>lItalian for travelers </td> 

e 211 «consciousness is rising everywhere. Many travelers are concerned about their ecological footprint... 


When you click Replace All, the Search Report panel expands to list all the 
changes made. 


7 Right-click the Search Report tab and select Close Tab Group from the context 
menu. Click the Close icon % on the Find panel to recover the screen space. 


Another method for targeting text and code is to select it before activating the 
command. This method can be used in either Design or Code view. 


Superpowerfindelicious! eg 


Find And Replace is one of the most powerful features in the program. It allows you to target, or limit, the 
search to the source code, to text only, to be based on case, and to whole words, and it gives you the ability 
to use regular expressions and to ignore whitespace. | could write an entire book on all the ways you could use 
this feature. 


Current Document 
Open Documents 


Folder... 
Basie a & 7, Basic Advanced “a= & YF, 
Selected Files in Site pochbalteong 
Find in: Entire Current Local Site [any tag] - Find in: Entire Current Local Site ~ — {amy tag) 3 
fem With Attribute ¥ vile me ed Teste Replace Tag & Contents bat | Hes bs ~ 


Replace Contents Only 

Remove Tag & Contents 

Strip Tag 
Action: — Set Attribute S < eee ba Action: (Y Change Tag To: _ [any tag) - 
Set Attribute 
Remove Attribute 
Add Before Start Tag 
») Bi Exceptions @ Add After End Tag b) 
Add After Start Tag 
Add Before End Tag : 


YO 
f ) (5 Exceptions 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 297 


8 In Code view, locate and select the code 
<div class="wrapper">, around line 105. 


9 Press Ctrl+F/Cmd+F. 


106 ¥ <div class="container"> 
) <h2 class="text-center">OUR FAVORATE FESTIVALS AND SEMINARS </h2> 
<div class="row"> 


109 ¥ <div class="col-lg-12"> 
<p>Want to see how the world parties? Want to learn a new language? There’s no time like the present. Check « 
nmentnave Thin antiacdata te nyadintadd aw a ummsbae lanatn ne cen anne ssi tm bn nbenanuis thin macnn amod a 
A 7,18 
romtinstance fleimstance body mumtinstance:editable 
@ Note: The Find The Find And Replace panel appears. The selected text is automatically entered 
And Replace panel into the Find field by Dreamweaver. This technique will work with small snip- 
Dpicaly appeals oe pets of text or code. With the text selected like this, Dreamweaver will find 
the Replace function ; 
hidden. the occurrence of this code element in the current file. But we want to find it 
throughout the entire site. 
10 Choose Find > Find And Replace In Files. 
6 6 : . Find and Replace : 
Basic Advanced ae O 7 


nde¢ Fediv class=" wrapper’s| | 


: J 


in: Entire Current Local Site - — fany tag} v 


Con @ > ce Replace >) ( Find All ) C Replace All ) (7 Exceptions 


The Find And Replace dialog appears. The selected code is automatically added 
to the search field. Note that the In field is targeting Entire Current Local Site. 


11 Click Find All. 


Search Output Git 


i 


{> Done. 7 items found in 13 documents. 


Matched Text 


main class="wrapper> |) 


contact-us.html __.Smain class ="wrapper’> 
cruises. html ___<main class= "wrapper" 
events.html __<main clas: 


index.htm! ___<main clas “wrapper"> 


tours. html ___<main class 


“wrapper"> 
Templates /favorite-temp.dwt ____<main class="wrapper"> 
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The Search panel appears, displaying all instances of the selected code within 
the site. The selected <div> element contains all the primary content of the site. 
Semantically, the page structure should use the <main> element instead. But we 
cannot just change the opening tag. We need to change both the opening and 
closing tags. 


12 Choose Find > Find And Replace In Files again. 


The Find And Replace dialog appears. The code <div class="wrapper"> 
appears in the search field. Dreamweaver has identified all instances of the tag 
we need to change, but if you tried to replace the tag now, it would simply swap 
out the opening tag. Instead, we need to use the advanced features of the dialog. 


13 Click the Advanced tab in the Find And Replace dialog. 


Find and Replace 


Basic Advanced 
——h— 


Find in: Entire Current Local Site {any tag] 


+) — With Attribute class = - wrapper 


Action: Change Tag ee. | div v 
iy : / 


RA 


> C Replace ) C Find All 


Dreamweaver may automatically populate the attribute field with the wrapper 
class name. It’s a good idea to target the exact tag whenever possible. 


14 In the Find In field, select div from the dropdown menu. If necessary, select 
With Attribute and class from the appropriate dropdown menus. 
Enter wrapper in the class dropdown menu. 


desc Find and Replace 


details 
Basic Advanced a Basic Advanced 
pasidaltnel n eta 


Find In Entire Current Local Site ~ AS div Entire Current Local Site 


r 
di 
+= With Attribute vi d With Attribute * ~~ wrapper 
t 
ellipse 
em 
Action’ Change Tag v Action’ — Change Tag “| To: | div 
a embed a 
feblend 
fecolormatrix 
RA —_—-----—. _ fecomponenttransfer san pee ean 
() >» C — Replace E ze > | Replace Find All Replace Al) (L) Exceptions 


fecomposite 


Next you can target the tag you want to end up with. 
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15 In the Action field, choose Change Tag, if necessary. 
Choose main from the To dropdown menu. 


kbd 
keygen 


Find and Replace 


Basic Advanced 


Basic Advanced label 
legend 
fi 

+ With Attribute Y dass line 


Find in: Entire Current Local Site v div Find in’ Entire Current Local Site 


+ — — With Attribute ~ class = wrapper 


lineargradient 
link ee 
Action: — Change Tag To: )Y matey Action: Change Tag 26 1c, | MULL 
map 
mark 


RA marker 


marquee 


16 Click Replace All. 


This operation cannot be undone in documents that are not currently open. 
Are you sure you want to replace all matches? 


An unnamed dialog appears, reporting that the replace operation cannot be 
undone in any closed documents. 


17 Click Yes. 


Search Output Git 


\ 
[> Done. 6 items found, 6 repiaced in 6 documents. 


File T Matched Text 

® about~us.html <main class="wrapper"> <div class="“container mt-4"> <h2 class="text-center”>ABOUT FAVORITE ( 
® contact-us.html <main class="wrapper’> <div class="container mt-4"> _ <h2 class="text-center’> <strong>CONTACT FAVC 
® cruises.html <main class="wrapper’> <div class="container mt-4"> <h2 class="text-center">OUR FAVORITE CRI 
 events.html <main class="wrapper"> <div class="container mt-4">_ <h2 class="text-center">OUR FAVORATE FE: 
® tours. html <main class="wrapper'> <div class="container mt-4">__<h2 class="text-center">OUR FAVORITE TOURS</! 
® Templates /favorite-temp.dwt <main class="wrapper"> _— <div class="container mt-3"> <h2 class="text-center">ADD HEADLINE HE! 


iN 


The Search Results panel displays the list of elements replaced in the 
site. It should show five pages in the list. The <div class="wrapper"> 
element is replaced, in all the documents where it was found, with 
<main class="wrapper">. 


18 Right-click the Search Results tag and select Close Tab Group from the 
context menu. 


When searching for text and code, you have seen that you can enter text into 
the search field and select text prior to activating the Find command. Unfortu- 
nately, there’s a limit to the amount of text Dreamweaver will add to the field 
automatically. For larger blocks of text and code, Dreamweaver also allows you 
to copy and paste into the search field. 
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19 In Code view, insert the cursor in the Seminars table. 
Select the table tag selector. 


‘The entire <table> element is selected, which represents nearly 100 lines 


of code. 


20 Press Ctrl+F/Cmd+F. 


<section> 


<tr> 
<th class="seminar">Seminar</th> 
<th class="description">Description</th> 
-— <th class="length">Length</th> 
231 <th class="day">Day</th> 
<th class="cost">Cost</th> 
</tr> 
<tr> 
<td class="seminar">French for travelers</td> 


“a 


<table width="95%" border="0"><caption>2020 SEMINAR SCHEDULE </caption> 


<td class="description">Get a drink, get a meal and get a room. Learn the basics of gettinc 


harriare @/tas 


a ¥,{l 


LS 


mmitinstance Aleinstance body minttinstance editable diy container — diy tow div .col-Ig-12 


section 


The Search panel appears, but notice that the Find field is empty. The selected 
code is just too much for the automatic feature. This is where copy and paste 


comes in handy. 


21 Close the Search panel. Press Ctrl+C/Cmd+C to copy the selected code. 


22 Insert the cursor in the Find field. 
Press Ctrl+V/Cmd+V to paste the selected code. 


225 ¥ <section> 
6% <table wicit="95%" border="0"><caption>2020 SEMINAR SCHEDULE </caption> 
¥ <u> 


<th class="seminar’>Seminar</th> 
<th <lass="description”>Description</th> 
<th class="length”>Length</th> 
ath clast="day">Day</th> 
<th class="cost">Cost</th> 
<tt> 


aaun 


<I> 
<th class~"seminar’>Seminar</th> 
<th classe “description” > Description</th> 
<th class="length”>Length</th> 


__<th classe"day">Oay<jth> eS 


A, [<table width="95%" border="0"> <caption> 2020 SEMINAR SCHEDULE </caption> 
| 
| 


fileaistance boty mttinstanceeditante GN) container 


The entire markup of the table appears in the Find field. But this power is not 


limited to the Find field. 
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23 Click to expand the Find panel to show the Replace field. 


1S ¥ <section> <section> 
v <table width="95%" border="0"><caption>2020 SEMINA <table width="95%" border="0"><caption>2020 SEMINAIT 
¥ <tr> <tr> 


<th class="seminar">Seminar</th> 
<th clacs="description">Description</th> 


<th class="seminar">Seminar</th> 
<th class="description">Description</th> 
<th class="length">Length</th> 
<th class="day">Day</th> 
<th class="cost">Cost</th> 
altr> 


seen 


to minimize or eliminate their impact. We have several experts who will derail the 
% <td class="length">3 weeks</td> 
<td class="day">W</td> 
<td class="cost’>$30 </td> 
< fue 
</table> 


“A Y_ to minimize or eliminate their impact. We have several experts who will detail the 
he <td class="length"> 3 weeks </td> 
<td class="day">W</td> 
<td class="cost’>$30 </td> 
</tr> 
</table> 


div container thy tONY Lance bady ramiinstance editable div coatainer aise row 


24 Insert the cursor in the Replace field. 
Press Ctrl+V/Cmd+V to paste. 


Ss ¥ <section> 
<table width="95%" border="0"><caption>2020 SEMINAR SCHEDULE </caption> 
<tr> 
<th class="seminar">Seminar</th> 
<th class="description">Description</th> 


Vv q, to minimize or eliminate their impact. We have several experts who will detail the various steps you can take to do this.</td> 
<td class="length">3 weeks</td> 
<td class="day">W</td> 
<td class="cost">$30 </td> 
</tr> 
</table> \ 


to minimize or eliminate their impact. We have several experts who will detail the various steps you can take to do this.</td> 
<td class="length">3 weeks</td> 
<td class="day">W</td> 
<td class="cost">$30 </td> 
</tr> 
</table>| 


mintinstance-fleins tance body mintinstance editable div container div ow div .col-lg~12 


section 


The entire table markup appears in the Replace field. As you can see, Find And 
Replace enables you to search for almost any type of markup or content and 
replace it wherever it appears in the site. 


25 If necessary, close the Find And Replace panel. 
Save all files. 


In this lesson, you created four new pages and learned how to import text and data 
from multiple sources. You formatted text as headings and lists and then styled it 
using CSS. You inserted and formatted two tables and added captions to both. And 


you reviewed and corrected text and code elements using Dreamweaver’s spell- 
checker and Find And Replace tools. 
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Review questions 


uu F&F WwW N 


Explain how to turn paragraph text into an ordered or unordered list. 
Describe two methods for inserting HTML tables into a webpage. 
What element controls the width of a table column? 

What items will not be found by Dreamweaver’s spell-checker? 


Describe three different ways to insert content in the Find field. 


Review answers 


1 


Highlight the text with the cursor and click the Ordered List button in the Property 


inspector. Then click the Unordered List button to change the numbered list to bullets. 


You can copy and paste a table from another HTML file or from a compatible program. 


Or you can insert a table by importing the data from a delimited file. 


The width of a table column is controlled by the <th> or <td> element that creates the 
widest individual table cell within the specific column. 


The spell-checker finds only words that are spelled incorrectly, not those that are used 
incorrectly. 


You can type text into the Find field, you can select text before you open the panel and 
then allow Dreamweaver to insert the selected text, or you can copy the text or code 
and then paste it into the field. 
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WORKING WITH IMAGES 


Lesson overview 


In this lesson, you'll learn how to work with images and include them 
in your webpages in the following ways: 


Insert an image into a webpage. 

Use Photoshop Smart Objects. 

Copy and paste an image from Photoshop. 

Make images responsive to different device and screen sizes. 


Use tools in Dreamweaver to resize, crop, and resample 
web-compatible images. 


This lesson will take about 2 hours and 30 minutes to complete. To get the 
lesson files used in this lesson, download them from the webpage for this 
book at www.adobepress.com/DreamweaverC1B2020. For more infor- 
mation, see “Accessing the lesson files and Web Edition” in the Getting 
Started section at the beginning of this book. 


f 
490 x 200 


w 
® 
= 
e 
#6 
% 


4B x 200 4G % 200 - §0b x 200 


vttercoont 


Dreamweaver provides many ways to insert and 
adjust graphics, both within the program and in tan- 
dem with other Creative Cloud tools, such as Adobe 
Photoshop. 
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Vector graphic formats 
excel in line art, draw- 
ings, and logo art. 
Raster technology 
works better for storing 
photographic images. 


Web image basics 


The web is not so much a place as it is an experience. Essential to that experi- 
ence are the images and graphics—both still and animated—that populate most 
websites. In the computer world, graphics fall into two main categories: vector 


and raster. 


Vector Raster 


Vector graphics 


Vector graphics are created by math. They act as discrete objects that you can repo- 
sition and resize as many times as you want without affecting or diminishing their 
output quality. The best application of vector art is wherever geometric shapes and 
text are used to create artistic effects. For example, most company logos are built 
from vector shapes. 


Vector graphics are typically stored in the AI, EPS, PICT, or WMF file formats. 
Unfortunately, most web browsers don’t support these formats. The vector format 
that is supported is SVG (Scalable Vector Graphic). The simplest way to get started 
with SVG is to create a graphic in your favorite vector-drawing program—such as 
Adobe Illustrator or Corel[DRAW—and then export it to this format. If you are a 
good programmer, you may want to try creating SVG graphics using XML (Exten- 
sible Markup Language). Check out www.w3schools.com/html/html5_svg.asp to 
find out more about creating SVG graphics. 


Raster graphics 


Although SVG has definite advantages, web designers primarily use raster-based 
images in their webpages. Raster images are built from pixels, which stands for 
picture elements. Pixels have three basic characteristics: 


* ‘They are perfectly square in shape. 
e ‘They are all the same size. 


e ‘They display only one color at a time. 
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Raster-based images are composed of thousands, even millions, of pixels arranged 
in rows and columns, in patterns that create the illusion of an actual photo, paint- 
ing, or drawing. It’s an illusion, because there is no real photo on the screen, just a 
bunch of pixels that fool your eyes into seeing an image. And as the quality of the 

image increases, the illusion becomes more realistic. Raster image quality is based 
on three factors: resolution, size, and color. 


Resolution 


Resolution is the best known of the factors affecting raster image quality. It is the 
expression of image quality measured in the number of pixels that fit in 1 inch 
(ppi). The more pixels you can fit in 1 inch, the more detail you can depict in the 
image. But better quality comes at a price. An unfortunate byproduct of higher 
resolution is larger file size. That’s because each pixel must be stored as bytes of 
information within the image file—information that has real overhead in computer 


terms. More pixels means more information, which means larger files. 


300 ppi 


The inset image shows 
an enlargement of the 
flowers, revealing the 
pixels that compose the 
image itself. 


Note: Printers and 
printing presses use 
round “dots” to create 
photographic images. 
Quality on a printer 
is measured in dots 
per inch, or dpi. The 
process of converting 
the square pixels used 
in your computer into 
the round dots used 
on the printer is called 
screening. 


Resolution has a dra- 
matic effect on image 
output. The web image 
on the left looks fine in 
the browser but doesn't 
have enough quality for 
printing. 
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Although these two 
images have identical 
resolution and color 
depth, you can see how 
image dimensions can 
affect file size. 


Luckily, web images have to appear and look their best only on computer screens, 
which are based mostly on a resolution of 72 ppi. This is low compared to other 
applications or output—such as professional four-color printing—where 300 dpi 
is considered the lowest acceptable quality. The lower resolution of the computer 
screen is an important factor in keeping most web image files at a reasonable size 


for downloading from the internet. 


Size 

Size refers to the vertical and horizontal dimensions of the image. As image size 
increases, more pixels are required to create it, and therefore the file becomes 
larger. Since graphics take more time to download than HTML code, many design- 
ers in recent years have replaced graphical components with CSS formatting to 
speed up the web experience for their visitors. But if you need or want to use 
images, one method to ensure snappy downloads is to keep image size small. Even 
today, with the proliferation of high-speed internet service, many websites still 
avoid using full-screen graphics, although that too is changing. 


1.6MB 


Color 


Color refers to the color space, or palette, that describes each image. Most com- 
puter screens display only a fraction of the colors that the human eye can see. And 
different computers and applications display varying levels of color, expressed by 
the term bit depth. Monochrome, or 1-bit color, is the smallest color space, display- 
ing only black and white, with no shades of gray. Monochrome is used mostly for 
line-art illustrations, for blueprints, and to reproduce handwriting or signatures. 


The 4-bit color space describes up to 16 colors. Additional colors can be simulated 
by a process known as dithering, where the available colors are interspersed and 
juxtaposed to create an illusion of more colors. This color space was created for 


the first color computer systems and game consoles. Because of its limitations, this 
palette is seldom used today. 
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The 8-bit palette offers up to 256 colors or 256 shades of gray. This is the basic color 
system of all computers, mobile phones, game systems, and handheld devices. This 
color space also includes what is known as the web-safe color palette. Web-safe 
refers to a subset of 8-bit colors that are supported on both Mac and Windows 
computers. Most computers, game consoles, handheld devices, and even phones 
now support higher color palettes, so 8-bit is not as important anymore. Unless you 
need to support non-computer devices, you can probably disregard the web-safe 
palette altogether. 


Today, only a few older cellphones and handheld games support the 16-bit color 
space. This palette is named high color and sports a grand total of 65,000 colors. 
Although this sounds like a lot, 16-bit color is not considered good enough for 
most graphic design purposes or professional printing. 


The highest color space is 24-bit color, which is named true color. This system 
generates up to 16.7 million colors. It is the gold standard for graphic design and 
professional printing. Several years ago, a new color space was added to the mix: 
32-bit color. It doesn’t offer any additional colors, but it provides an additional 8 
bits of data for an attribute known as alpha transparency. 


Alpha transparency enables you to designate parts of an image or graphic as fully 
or partially transparent. This trick allows you to create graphics that seem to have 
rounded corners or curves and can even eliminate the white bounding box typical 


of raster graphics. 


Here you can see a 
dramatic comparison of 
three color spaces and 
what the total number 
of available colors 
means to image quality. 


24-bit color 8-bit color 4-bit color 


As with size and resolution, color depth can dramatically affect image file size. 
With all other aspects being equal, an 8-bit image is more than seven times larger 
than a monochrome image. And the 24-bit version is more than three times larger 
than the 8-bit image. The key to the effective use of images on a website is finding 
the balance of resolution, size, and color to achieve the desired optimal quality. 


Optimizing your images is essential, even as more people get smartphones and 
tablets, because there are still millions of people all across the United States, and 
around the world, who don't have high-speed wired access to the internet. In 
February 2018, the Pew Research Center published a study reporting that only 
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65 percent of American households had access to broadband internet. Check out 
https://tinyurl.com/pew-broadband-report to see specific details. Using large 
images on your site is becoming more popular, but it could also cause problems for 
your target audience, depending on where they live. 


Raster image file formats 


Raster images can be stored in a multitude of file formats, but web designers have 
to be concerned with only three: GIF, JPEG, and PNG. These three formats are 
optimized for use on the internet and are compatible with virtually every browser. 
However, they are not equal in capability. 


GIF 


GIF (Graphics Interchange Format) was one of the first raster image file formats 
designed specifically for the web. It has changed only a little in the last 30 years. 
GIF supports a maximum of 256 colors (8-bit palette) and 72 ppi, so it’s used 
mainly for web interfaces—buttons and graphical borders and such. But it does 
have two interesting features that keep it pertinent for today’s web designers: index 
transparency and support for simple animation. 


JPEG 


JPEG, also written JPG, is named for the Joint Photographic Experts Group that 
created the image standard back in 1992 as a direct reaction to the limitations of 
the GIF file format. JPEG is a powerful format that supports unlimited resolution, 
image dimensions, and color depth. Because of this, most digital cameras use JPEG 
as their default file type for image storage. It’s also the reason most designers use 
JPEG on their websites for images that must be displayed in high quality. 


This may sound odd to you, since “high quality” (as described earlier) usually 
means large file size. Large files take longer to download to your browser. So why is 
this format so popular on the web? The JPEG format’s claim to fame comes from its 
patented user-selectable image compression algorithm, which can reduce file size 
as much as 95 percent. JPEG images are compressed each time they are saved and 
then decompressed as they are opened and displayed. 


Unfortunately, all this compression has a downside. Too much compression 
damages image quality. This type of compression is called lossy, because it loses 
quality. In fact, the loss in quality is great enough that it can potentially render an 
image totally useless. Each time designers save a JPEG image, they face a trade-off 
between image quality and file size. 
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Here you see the effects 
of different amounts of 
compression on the file 
size and quality of an 
image. 


Low Quality Medium Quality High Quality 
High compression Medium compression Low compression 
130K 150K 260K 


PNG 


PNG (Portable Network Graphics) was developed in 1995 because of a looming 
patent dispute involving the GIF format. At the time, it looked as if designers and 
developers would have to pay a royalty for using the .gif file extension. Although 
that issue blew over, PNG has found many adherents and a home on the internet 
because of its capabilities. 


PNG combines many of the features of GIF and JPEG,and adds a few of its own. 
For example, it offers support for unlimited resolution, 32-bit color, and full alpha 
transparency. It also provides lossless compression, which means you can save 

an image in PNG format and not worry about losing any quality when you save 
the file. 


The only downside to PNG is that its most important feature—alpha transparency— 
is not fully supported in older browsers. Luckily, these browsers are retired year 
after year, so this issue is becoming of little concern to most web designers. 


But as with everything on the web, your own needs may vary from the general 
trends. Before using any specific technology, it’s always a good idea to check your 
site analytics and confirm which browsers your visitors are actually using. 


Previewing the completed files @ Note: if you have 


not already down- 
loaded the project files 


To get a sense of the files you will work on in this lesson, let’s preview the forihilessontovout 


completed pages in a browser. computer from your 
Account page, make 
1 Launch Adobe Dreamweaver (2020 release) or later. etre toda cononises 


“Getting Started” at the 


2 Define a new site for the lesson09 folder, as described in the “Getting Started” goal 
beginning of the book. 


section at the beginning of the book. Name the new site lesson09. 
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3 Open contactus-finished.html from the lesson09/finished folder. 


< contact-os.htint 


Sources Code! bootstrap 


43,1 


favorite-styles.css — jquery~3. 


Elaine Rendel 

Elaine is the President and 
CEO of Favorite City Tour. She 
has 20-years experience in 
the travel industry and worked 
at several travel agencies in 
the past developing tours and 
cruise packages for both 
individuals and large 
corporations. 


She's not afraid of diving into 
a problem. You may find her 


popper. min js 


bovtstrap-4.3.1.)¢ 


Sarah Harvey 

Sarah arranges all our 
seminars and classes. Sarah 
makes these offerings start on 
time and meet their goals, so 
you can enjoy every minute. 


She can also create custom 
events for people with special 
needs such as handicap 
access or special dietary 
needs, or make 
accommodations for existing 


A company is only as good as its people and we have great people! We look long and hard to find people that will make a difference. We hire only 
the best and then we train them to deliver a difference every day. 


Eric Quist 

Eric is our transportation 
expert. He can review your 
needs and resources to 
identify the best solutions for 
daily transport to or in any 
city, whether it includes cars, 
bikes, buses or trains. He is 


an expert in alternative energy) 


and will make sure your 


carbon footprint is as small as! | 


possible. 


1203x543 


The page includes several images, as well as a Photoshop Smart Object. 


4 Open aboutus-finished.html from the lesson09/finished-files folder. 


* sbout-us.html 


“Souree Code ” 


bootstrap-4.3.1.css 


favorite-styles.css 


jquery-3.3.1.minJjs 


popper.minjs 


"Travel with a Difference” is not just our motto, it’s the way we do business. Here 


ea 


bootstrap-4.3.1js 


ABOUT FAVORITE CITY TOUR 


at Favorite City Tour we take travel 


The About Us page contains an image that adapts automatically to the size of 


the screen. 
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5 Drag the scrubber to the left to change the width of the document window. 
Notice that the image in the text area scales with the layout. 


Geta ~ Booka Bargain 
- Quote : Tour « Deals 


ABOUT FAVORITE CITY TOUR 


| "Travel with a Difference” is not iiist oir Matto it’s the wav we do 


6 Open tours-finished.html and observe the image carousel. 


x ours. hint 


Source Code boorstrap-4.3.1.css —_favorite-styles.css — jauery-3.3.LninJs —popper.minjs —_bovtstrapa4.3.1js Y 


The image carousel displays a large image that animates by moving from right to 


left. It pauses for a moment and then another image slides onto the screen. Note 
the headings and text that accompany each image. 


7 Close all sample files. 


In the following exercises, you will insert these images into these pages using a vari- 
ety of techniques and format them to work on any screen. 


Inserting an image 


Images are key components of any webpage, both for developing visual interest and 
for telling stories. Dreamweaver provides numerous ways to populate your pages 
with images, using built-in commands and even using copy and paste from other 
Adobe apps. 


1 In the Files panel, open contact-us.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


® Note: When work- 
ing with images in 
Dreamweaver, you 
should be sure that your 
site's default images 
folder is set up accord- 
ing to the directions in 
the “Getting Started” 
section at the begin- 
ning of the book. 
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Tip: It’s always a 
good idea to identify 
any classes or ids 


assigned to an element. 


It makes it easier to 
re-create the structure 
and styling if any- 
thing happens to the 
element. 


The layout contains six profiles of the Favorite City Tour staff. Each profile con- 
tains an image placeholder. You may have noticed the numbers 100 x 125 that 
appear in the placeholder. These indicate the dimensions of the placeholder and 
the replacement images. In most cases, you will want to resize and resample 
images before you place them in the layout. If that isn’t possible, Dreamweaver 
has the ability to adjust image size and quality itself. 


When a layout uses placeholder images, the easiest way to replace them is by 


using the Property inspector. 


2 If necessary, choose Window > Properties to display the Property inspector. 
Dock it to the bottom of the document window. 


3 Select the image placeholder in the profile for Elaine. 


ig CUNIALI FAVURIIEUILY IUURK 
| Elaine Rendel (ip Sarah Harvey LE Eric Qui 
Elaine is the President and) Sarah arranges all our a Eric is ou 
100 8125 | CEO of Favorite City Tour. : 160x425 seminars and classes. ‘Sarg | % 3% expert. H 
Ly | She has 20-years expericr makes these offerings star needs an 
| Inthe travel industry anc on time and meet their | ; ‘identify t 
worked at several travel | goals, so you can enjoy ; for daily: 
agencies in the past every minute. _ aa any city, 
developing tours and crui | includes 


CAA AaN allen erasta PR 


al list-unstyled li  .media.profile 


The Element Display appears focused on the img element. Note the class .mr-3 
applied to it. The Property inspector displays the properties for image elements. 


In HTML, images do not actually appear in the code. Instead, the <img> ele- 
ment references an image file somewhere on the web server, or elsewhere on 
the internet. Then, the browser locates that file and renders it in the page. The 


Property inspector enables you to identify the assigned image source file and to 
specify a new one. 


4 Examine the Src field in the Property inspector. 


WwW WWE Erie fF £F FAW BEE FE be GE 
| Elaine Rendel " E | Sarah Harvey | 
Elaine is the President and | : Sarah arranges all our 
CEO of Favorite City Tour. She 100 R1Ee seminars and classes. 
has 20-years experience in | | makes these offerings 
| ff ——__s|:stthe travel industry and worked i i time and meet their gc 
at several travel agencies in : you Can enjoy every ir 
the past developing tours and. se tehe 8 noting 
cruise packages for both She can also create ct 
individuals and large & events for people with 
toa MADRAS ciinh Ae handin: 
mimtinstanc body mmtinstance editaile div container.mt-4 div row div col-ig-4 ul dist-unsty 
Properties : : ezaniin me 
Image, 1K v W 100 pst 
ID ee Pa 


te @ A HS | px vu 
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The Src field says images/100X125.g7f, which is the name and location of the 
image placeholder. You can use this field to load the image for Elaine. 


Click the Browse For File icon baad on the Src field. 


~ 40X40.gif 
100X125.gif 

= 400X200.gif 

2: 1920x500.gif 

‘™8 athens-tour.jpg 

bargain.jpg 

& book.jpg 


3 elaine.jpg 
== favcity-logo.jpg 


=~ florence-tour-carousel. jpg 


= florence-tour.jpg 
= greek-cruise.jpg 
sa island-tour.jpg 
& lainey.jpg 


> images 


== london-tour-carousel-placeholder.jog 


Options 


A file window opens. 


Date Modified 
9/17/19, 7:44 PM 
9/17/19, 7:44 PM 
9/17/19, 7:44 PM 
9/1 , 7:44 PM 
Yoday, 4:47 PM 
10/9/19, 1:55 PM 
10/9/19, 1:55 PM 
10/23/19, 12:13PM 
10/7/19, 10:41 AM 
Today, 4:35 PM 
Today, 4:31 PM 
Today, 4:40 PM 
Today, 3:55 PM 
10/23/19, 12:06 PM 
Today, 5:29PM 


Select elaine.jpg and click OK/Open. 


Elaine Rendel 


«=| Elaine is the President and 


| CEO of Favorite City Tour. She 
has 20-years experience in 
SC the travel industry and worked 
at several travel agencies in 
the past developing tours and 
cruise packages for both 
individuals and large 


muntinspance é z needs Ve 

Properties 253 DEE LEAS REAR SLES 
bags 36 Src images/elainejpg $9 

& P, Unk oe 

Map Target 

HO Y origina Os 


Sarah Harvey / 

Sarah arranges all our 
seminars and classes. Sarah | 
makes these offerings start on 
‘time and meet their goals, so | 
you can enjoy every minute. | 


She can also create custom 
events for people with special: 


> 
Size 

15... ytes 

37..ytes 

1 KB 

7 KB 

38 KB 

2KB 

28 


51 KB 
246 KB 
24 KB 
40 K8 
31 KB 
271 KB 
179 KB 


Q Sear 
Kind 

GIF Image 
GIF Image 
GIF Image 
GIF image 


JPEG image 
JPEG image 
JPEG image 
JPEG image 
JPEG image 


JPEG image 
JPEG image 
JPEG image 
JPEG image 
JPEG 
JPEG image 


nage 


~ Eric Quist 
Eric is our transportation 
‘expert. He can review yi 
needs and resources to 
identify the bSst solutio! 
daily transport to or ina 
city, whether it includes 
‘bikes, buses or trains. H 
an expert in alternative « 


WRK AZE 


mande nunh ae handinan 


containermnt-4 die tome hy 


col-ig-& gh 


Hst-unsiyled ff — .medis.profi 


WwW 100 


Elaine’s picture appears in the <img> element. 


px v2 
6 


a @A 45 px ve 


Alt Generic placeholder image Title 


Alt text provides descriptive metadata about images. In some browsers, alt text 


may be seen if the image doesn’t load properly, or it may be accessed by indi- 


viduals with visual disabilities. You should always add alt text to your images. 


7 Inthe Alt field in the Property inspector, enter Elaine, Favorite City Tour 


President and CEO as the alternate text. 


Properties 


Image, 36K 


gt: ID 


Map 


Target 


th) 0 % VY original 


Sre 


Link 


images/elaine.jpg (3) B 
© & 
© & 


Alt{ Elaine, Favorite City Tour | * 
President and CEO | 
px ve | | 


The image title attribute is similar to alt text. It provides additional information 
about the image. Search engines don’t use it for result rankings, but it’s a good 


idea to fill it in as well. 
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® Note: The content 
of the Title field will 
show as a tool tip in 
most browsers when 
you position the cursor 
over the image. 


8 Inthe Title field in the Property inspector, enter Elaine, Favorite City Tour 


President and CEO as the title text. 


Class 


Edit [Fe] 3 a @ Ao HE 125 Hix ve 


aS 


PETES SEES 
W100 fox ~ Be Alt Elaine, Favorite City Tour __ Title | ity Tour President and CeO | ©) 
4 President and CEO k 


NESS 


9 Choose File > Save. 


Design view provides an easier way to deal with placeholder images. 


Inserting images in Design view 


Dreamweaver provides several ways to insert images. When the layout has place- 


holders or existing images, Design view provides a simple way to replace them. 


1 


Switch to Design view. 


The Bootstrap styling is not supported in Design view, so the layout will look 
totally different. The first thing you will notice is that card elements appear in a 
different order than they do in Live view. 


2 Scroll down to find the image placeholder for Sarah. 


ep Hee ee ee ek ie 


Sarah arranges all our seminars and classes. Sarah makes these offerings start a 


Sarah will be the third item in the section. 


You could use the Property inspector to replace this placeholder as you did 
before, but Design view has a few advantages over Live view. 


Double-click the placeholder. 


A file window opens. 


Select sarah.jpg from the lesson09/images folder. 
Click OK/Open. 


Sarah's image appears in the <img> element. 
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5 Inthe Property inspector, enter Sarah Harvey, Favorite City Tour Events 
Coordinator in the Alt field and in the Title field. 


; Re 
a EA EIA ASAE BO ERO aot em 


‘Sarah Harvey 


iminiite 


mmunstance Aleimstance body montinatanceedaable div dw @ 1118x519 v Sb 


= 

image, 32K | Src images/sarah.jpg Os Alt Sarah, Favorite City Tour Title ty Tour Events Coordinator @ 

2 ek os placeholaer Wage r cA 
ae a = 5 Seemed otc dental hr natn 
0 %O VY original aos al 


Sarah's image is complete. 
6 Double-click the placeholder for Eric. 


7 Select eric.jpg from the lesson09/images folder. 
Click OK/Open. 


Eric’s photo replaces the placeholder. 


8 Inthe Property inspector, enter Eric Quist, Favorite City Tour Events 
Coordinator in the Alt field and in the Title field. 


i 
t 
t 
i 
i 
st solutions for daily transport to or in any city, | 


mmtinstance:Bleinstance body raratinstance editable- 


edia.profile ina us @® 107x503 ~ fey 


= 


Properties 
= 0 ln bt Alt Eric Quist, Transportation — Title fation Research Coordinator| () 
iB | Research Coordinator eeemnnemmeen Z 
2 Link “ 
Map Target 
ae + + * Foe 
bl 0 'O VY Original ; 


Eric’s image is complete. 
9 Save the file. 


Sometimes you'll get images that have not been prepared in advance for a particu- 
lar layout. Dreamweaver provides a full set of tools that enable you to adapt images 
to almost any purpose. 
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Optimizing images with the 
Property inspector 


Optimized web images try to balance image dimensions and quality against file 
size. Sometimes you may need to optimize graphics that have already been placed 
on the page. Dreamweaver has built-in features that can help you achieve the small- 
est possible file size while preserving image quality. In this exercise, you'll use tools 
in Dreamweaver to scale, optimize, and crop an image for the web. 


1 If necessary, open contact-us.html in Design view or switch to it. 
Scroll to the placeholder for Lainey. 


2 Double-click the placeholder. 
3 Select lainey.jpg and click Open. 


 contactous:hiral” 


Sauce COE? dooistrap-4.3.1.css — favorite-styleness — iguery-3.2.1,minJs —-popRerminjs — bootsteap-8.3.15 4 
‘neosaienatn ESINS ISAS ESEACOSIISA 


onrfile Weegee crare8 ® m1isxses ~ [RH 


Ry 


Ste imagesslaineyjng «= CS Chass Coed: x AR Generic placeholder image — Title ® 


tink 2S xm eR e a 


Map Taront 


DO Y ongina Op 


The image is too large, and there’s barely any room for it in the column. It could 
really use some resizing and cropping. Dreamweaver’s built-in tools work only 
in Design view. 


4 Observe the Property inspector. 


Lainey Harris | rh 


mmtinstance-fileinstance’ hody mmtinstance:editable div div row div .col-Ig-4 ut list-unstyled =f — smedia.mt-4.¢ 
Properties SERS eeemrapsnisnseoresecie spisicaomuenanicinonscsoonnen secretaries sian seectiees sscunmenienciets ae 
Image, 266K * “ r pe SSeS SEMIS RE NT z 
ft Ste images/lainey.ipg <3 3 Class Cmr-3 v) Ws 653th px wi Neh 
q. Link e 4 tS) 
: OB { cai fe) g& 6. 11 @ A) H S00 px vH 
Map Target a = ssceeienees as cotememnnenerS 
Has 0 *%O YB original Ope 
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Whenever an image is selected in Design view, image-editing tools appear 
below the Class menu in the Property inspector. The icons allow you to edit the 
image in Adobe Photoshop or to adjust several aspects in place. See the sidebar 
“Dreamweaver’s graphic tools” at the end of the lesson for an explanation of 
each tool. 


You can reduce the dimensions of an image in Dreamweaver in two ways. The 
Crop tool enables you to remove portions of the image you do not want. 


5 Click the Crop icon O. 


__ Dreamweaver 
The action you are about to perform will permanently 


alter the selected image. You can undo any changes you 
make by selecting Edit > Undo. 


An unnamed dialog appears explaining that the change eee 
you are about to make will permanently change the a 
image but that you will be able to undo the changes. 


© Note: Undo will work until you save or close the file. fpllponie show mechismmesceoe again 


6 Click OK. ue 


A cropping box appears on the image. 


7 Resize the cropping box to target Lainey’s face, similar to the composition of the 
other two images. 


; Properties 
Lainey Harris Image, 266K 


Src images/lainey.jpg =} W 218 


vag Wes 
| ee Link os Ble <0 R@A #22 pH 


As you resize the image, the dimensions of your cropped image appear in the 
Property inspector. It’s rare to hit the exact size you need. In most cases, it will 
take a couple of tries. 


8 Press Enter/Return to finalize the initial crop. 


The excess portion of the image is now removed, but the image still doesn’t have 
the correct dimensions. Your dimensions will probably be different than those 
pictured. The next step is to resize the image so that one of the dimensions 
matches the desired 100 x 125 pixel size. 
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9 Inthe Height field enter 125 px and press Enter/Return. 


The height of the image is now 125 pixels. The change is temporary for the 
moment, indicated by the two icons that appear beside the dimension fields. 
The Reset To Original Size icon & will reset the dimensions to the previous 
size. The Commit Image Size icon Y will make the change permanent. 


10 Click the Commit Image Size icon Vv. 


px “ig Ov Alt Generic placehold 
; ei Pe 


A dialog appears again telling you that the change to the image size will be 
permanent. 


11 Click OK. 


mimtinstance Aleinstance body mintinstance editable div div wow div .col-lg-4 ul slist-unstyled Hi m 
~ eel 
Properties 
eee Ue Src images/lainey.jpg © Class (mr-3 SY, W 105 px ~ ie 
1D j 
1 Link OB Edit [Fa] 3 ia @A 4H 22 px vo 
Map Target v k 
Ly O *%O Y Original OB 


The height of the image is now the correct dimension, but the width is still off. 
To achieve the exact size you'll need to use the Crop tool one more time. 


12 Click the Crop tool Ge 
A dialog appears again telling you that the change to the image size will be 


permanent. The dialog provides an option to permanently dismiss this warning. 
Feel free to select this option if you do not want to be reminded each time. 


13 Click OK. 


320 LESSON 9 Working with Images 


Lainey Harris 


VD RiR AL ARR ARAN Rie CARR RR eRK ANA 


mimtinstance:fileinstance body muimtinstance editable div div row div —.col-ig-4 ul — Jist-unstyled {i m 
Properties 
x Image, 17K Src images/lainey.jpg Ob Class (mr-3 v W 95 px v B 
; s | Link a) Edit [Fu] 3 ie @ A H 14 px vo 
he Pera ee eT Sees a Best athena reac em mee Secinati 


The cropping box appears on the image. This time you will adjust the size using 
only the dimension fields in the Property inspector. 


14 Enter 100 px in the Width field. 
Enter 125px in the Height field. 
Press Enter/Return to commit the change. 


If both dimensions appear properly in the fields, skip to step 17. Otherwise, you 
may find you cannot enter the height dimension. That’s because when the crop- 
ping box appears, it is offset from the edges of the image and there may not be 
enough space to set the height. The cropping box changes from only the bottom 
and right sides when dimensions are added manually. 


15 Using the mouse, drag the cropping box to the top of the image. 


l ainay mananeas oir racaarch and 


knce-Aleinstance body mmtinstance‘editable div div .row” div .col-lg-4 ul .list-unstyled ti 
Ge 16K Src images/lainey.jpg @) Ga Class (mr-3 ¥ W 100 px v b 
Link Ob Edit [Fo] g* Go 1 &. @ A H 119) px vA 


Once the cropping box is moved, there is now enough room at the bottom to 
enter the desired height. 
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16 Enter 125px in the Height field again and press Enter/Return to commit 
the change. 


The Height field is now honoring the height. 
17 Double-click the image to commit the changes. 


Lainey’s image is now cropped and the proper size. Let’s add the Alt and 
Title text. 


18 If necessary, select Lainey’s image. 


19 Enter Lainey Harris, Research and Development Coordinator in the Alt and 
Title fields in the Property inspector. 


Lainey’s image is complete. 
20 Save the file. 


So far, you have inserted only web-compatible image formats. But Dreamweaver is 
not limited to the file types GIF, JPEG, and PNG; it can work with other file types 
too. In the next exercise, you will learn how to insert a Photoshop document (PSD) 
into a webpage. 


Inserting non-web file types 


Although most browsers will display only the web-compliant image formats 
described earlier, Dreamweaver also allows you to use other formats. Once they’re 
in place, the program will then automatically convert the file to a compatible for- 
mat on the fly. 


1 Ifnecessary, open contact-us.html in Design view. 


2 Double-click the image placeholder for Margaret. 
Select margaret.psd from the lesson09/resources folder. 


3 Click OK/Open to insert the image. 


<j>R By: & ) resources © Q Search 


Name Date Modified Ss Size Kind 


— (elmargeretpsd 


40/23/19, 12:33 PM__ 


938KB Adobe Photoshop file 


Margaret Julian 


Maggie is our office 
hey need to do theii 


‘Ou may never meet 


omputers humming 


Email Maggie at: ma 


Options 


Cancel 
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The Image Optimization dialog appears; it acts as an intermediary that allows 
you to specify how and to what format the image will be converted. 


4 Observe the options in the Preset and Format menus. 

image Optimization image Optimization 

Preset: JPEG High for Maximum... \ 
PNG24 for Photos (Sharp Details) 


Preset: JPEG High for Maximum... ¥ 


Format: : JPEG for Photos (Continuous Tones) Format: JPEG v 
ad pce ed a 
Quality: | G8 for Logos and Text Quality: | PNG 32 
v JPEG High for Maximum Compatibility PNG 24 
GIF for Background Images (Patterns) PNG 8 
r 2 _PNG32 for Background Images (Gradients) fF Ley JPEG 
GIF ‘ 
‘hi etal i ceca ee on 
rE of the dé 
File size: 33 K File size; 33K 
Ce ss nanescaeeocepastetn 


The Preset menu allows you to select from six predetermined options that have 
a proven track record for web-based images. 


The Format menu allows you to specify your own custom settings from among 
five options: GIF, JPEG, PNG 8, PNG 24, and PNG 82. 


5 Choose JPEG High For Maximum Compatibility from the Presets menu. 
Note the Quality setting. 


® Note: The image Optimization dialog displays the final file size of the image at the bottom 
of the dialog. The goal is to get every image below 50K in size when possible. 


® Note: When an image has to be converted this way, Dreamweaver usually saves the con- 
verted image into the site’s default images folder. This is not the case when the images inserted 
are web-compatible. So before you insert an image, you should be aware of its current location 
in the site and move it to the proper folder first, if necessary. 


This Quality setting produces a high-quality image with a moderate amount 

of compression. If you lower the Quality setting, you automatically increase 
the compression level and reduce the file size; increase the Quality setting for 
the opposite effect. The secret to effective design is to select a good balance 
between quality and compression. The default setting for the JPEG High preset 
is 80, which is sufficient for your purposes. 


6 Click OK to convert the image. 


A file dialog appears with the name margaret entered in the Save As field. 
Dreamweaver adds the .jpg extension to the file automatically. Be sure to save 
the file to the default site images folder. If Dreamweaver does not automatically 
point to this folder, navigate to it before saving the file. 


she is ot 


of the dz 
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Save As: | | 
Tags: 
=v rslg {@ images on a Q Search 
/ Name Date Modified ~ Size Kind 
Maggie is our off =~ 
hey need to do tf URL: images/margaret.jpg 
Relative to: Document @ contact-us. html 
Ou May never me ; ‘ We 
| Change default Link Relative To in the site definition. 
icomputers humm 
k 
Email Maggie att Select file name from: é Site Root 4 
New Folder Cancel Save | L 


Ph Tip: The Element 7 Click Save. 

Display and the Prop- . ; ; ; . 

erty inspector can be The file dialog closes. The image appears in the layout and is now linked to the 
used interchangeably to JPEG file saved in the default images folder. 


ter alt text. 
ae dos 8 Enter Margaret Julian, Office Manager in the Alt and Title fields. 


The image appears in Dreamweaver at the cursor position. The image has been 
resampled to 72 ppi but still appears at its original dimensions, so it’s larger 
than the other images in the layout. You can resize the image in the Property 
inspector. 


9 If necessary, click the Size Constraint icon @ to display the closed lock. 


@ Note: Whenever 10 Change the Width value to 100px and press Enter/Return. 
you change HTML or 
CSS properties, you may 
need to press Enter/ 
Return to complete the 
modification. 


ra 


body mritinstance editable div bing div colelg-4 al slist-unstyled i media mt-4. profile 
& 


. 

Alt Margaret Ju 

~ aS Manager 
px VE 


Link O& Edit [Ps] ge ay m@A H 


Map Target 


When the lock icon appears closed, the relationship between width and height 
is constrained, and the two fields change proportionally to each other—change 
one and they both change. The change to the image size is only temporary at 
the moment, as indicated by the Reset and Commit icons. In other words, the 
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HTML attributes specify the size of the image as 100 pixels by 125 pixels, but 
the JPEG file holds an image that’s still 300 pixels by 375 pixels—three times 
larger than it needs to be. 


11 Click the Commit icon W. 


mimtinstance:fileinstance body mmtinstanceseditable list-unstyled ti media.mt-4. profile 


Properties 
PS image, 34K 


1D 


Src images/margaret.jpg Og W 100 px » 3 Ait Margaret julian, Office 
8 Ov Manager 
H 125 px v4 h 


Target 


The image is now resized to 100 by 125 pixels permanently. 


In Design view, you can see in the upper-left corner of the image an icon that 
identifies this image as a Photoshop Smart Object. 


Maggie is our office manager. Although she's the youngest member of our staff sh 
hey need to do their job at the highest level. 


Unlike other images, Smart Objects maintain a connection to their original 
Photoshop (PSD) file as long as it is stored in the same folder from which it was 
inserted and as long as it can be accessed by Dreamweaver. If the PSD file is 
altered in any manner and then saved, Dreamweaver identifies those changes 
and provides the means to update the web image used in the layout. 


12 Save the file. 


© Note: At times, you 
may find that images 
will not scale correctly 
in Dreamweaver. If the 
final dimensions are 
not exactly 100 x 125, 
you can toggle the Size 
Constraint icon and 
manually set them. 
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© Note: The following 
exercise can be com- 
pleted only if you have 
Photoshop installed on 
your computer along 
with Dreamweaver. 


Right size, wrong size 


Until the latest mobile devices appeared on the scene, deciding what size and 
resolution to use for web images was pretty simple. You picked a specific width and 
height and saved the image at 72 pixels per inch (ppi). That's all you needed to do. 


But today, web designers want their sites to work well for all visitors, no matter 
what type or size of device they want to use. Many new phones and tablets have 
resolutions exceeding 300 ppi. So the days of picking one size and one resolution 
may be gone forever. But what's the answer? At the moment, there isn’t one perfect 
solution. 


One trend simply inserts an image that is larger or one that has higher resolution 
and then resizes it using CSS. This allows the image to display more clearly on 
high-resolution screens, such as Apple’s Retina display. The downside is that lower- 
resolution devices are stuck downloading an image that's larger than they need. 
This not only slows the loading of the page for no visual benefit but can incur higher 
data charges for smartphone users. 


Another idea is to provide multiple images optimized for different devices and 
resolutions and use JavaScript to load the proper image as needed. But many users 
object to using scripts for such basic resources as images. Others want a standard- 
ized solution. 


W3C is working ona technique that uses a new element named <picture>, which 
will not require JavaScript at all. Using this new element, you would select several 
images and declare how they should be used, and then the browser would load the 
appropriate image. Unfortunately, this element is so new that Dreamweaver doesn't 
support it yet, and few browsers even know what it is. 


Implementing a responsive workflow for images is outside the scope of this course. 
But you should keep an eye on this trend and be prepared to implement the new 
solutions that evolve. 


Working with Photoshop 
Smart Objects (optional) 


Dreamweaver has a special affinity with Photoshop images. It maintains an interac- 
tive connection with the original image and can notify you when that image is 


altered. In this exercise you will learn how to update the Photoshop Smart Object 
used in your layout. 


1 Ifnecessary, open contact-us.html in Design view. 
Scroll down to the image margaret.jpg. 


326 LESSON 9 Working with Images 


2 Observe the icon in the upper-left corner of the image. 


The ial, icon indicates that the image is a Smart Object. The icon appears only 
within Dreamweaver itself; visitors see the normal image in the browser. If you 
want to edit or optimize the image, you can simply right-click the image and 
choose the appropriate option from the context menu. 


To make substantive changes to the image, you will have to open it in Photo- 
shop. (If you don’t have Photoshop installed, copy lesson09/resources/ 
smartobject/margaret.psd into the lesson09/resources folder to replace the 
original image, and then skip to step 6.) In this exercise, you will edit the image 
background using Photoshop. 


3 Right-click the margaret.jpg image. 
Choose Edit Original With > Adobe Photoshop 2020 from the context menu. 


Remove Tag <img> 
Make Link 


Reset Size To Original 


Optimize... 

Bree she's the youngest merhber of our 
Edit With > 
Add to Image Favorites Browse... 


Edit Image Layer Type Select Filter 3D View Window Help @® 


Adobe Photoshop 2020 


@ Photoshop file 


a o. v WxH x Reso... +100 px @ 125% 2 pxfins v Clear teas Straighten QUEI] » fi: 


< 
é * margaret.psd @ 100% (New Bacground, RGB/8) * : 
i Color. Swatches 


Libraries ©: Adjustments 
Q 

My Library. 
View by Type v 


“ Colors 
sa 
+m 4MB a 


Layers Channels Paths 4 


ee 
¥ 
tb. A 
oF 
O& 
tf 
ws 
2 oe 
Tk 
ow 
Q 


Doc: 329.6K/983.8K 


Photoshop launches—f it is installed on your computer—and loads the file. 


4 In Photoshop, choose Window > Layers to display the Layers panel, if necessary. 


Observe the names and states of any existing layers. 


The image has two layers: Margaret and New Background. New Background is 
turned off. 


® Note: The exact 
name of the apps 
appearing in the menu 
may differ depending 
on your operating sys- 
tem and what version 
of Photoshop you have 
installed. If no version of 
Photoshop is installed 
at all, you may not see 
any program listed. 
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5 Click the eye icon © for the New Background layer to display its contents. 


ee RH 


a XK margaretpsd 100% Color 


Saat Libraries 
Kibraries 


rk 
Layers hay! 


; © 
{kis @Tt Oh ® 


se ee 


: EE mz g 
] Nie Bacgorse i Ro © io] 5] New Baxarouns 


wig 


Indicates layer visibility 
Baa . 


Wat gares. q } is 
she Me : és. 


Oem 2 & 3 oO Oem GB 


The background of the image changes to show a harbor scene. 
6 Save the Photoshop file. 


7 Switch back to Dreamweaver. 
Position the cursor over the Smart Object icon. 


A tool tip appears indicating that the original image has been modified. You 
don’t have to update the image at this time, and you can leave the out-of-date 
image in the layout for as long as you want. Dreamweaver will continue to 
monitor its status as long as it’s in the layout. But for this exercise, let’s update 
the image. 


8 Right-click the image and choose Update From Original from the context menu. 


Remove Tag <img> 
Make Link 


Reset Size To Original 
Optimize... 


Margaret Julian 


Maggie is our office manager. Althou: Maggie is our office manager. Although 


Maggie is our ih 
o9 Edit With pees 


hey nead ta da thair inh at the hinha hav naoed tn ¢ Pldie Aud te alee ~ wal hav naad ta cin thair inh at the hinhact 


This Smart Object, and any other instances of it, changes to reflect the new 
background. You can check the status of the Smart Object by positioning the 
pointer over the image. A tool tip should appear showing that the image is 
synced. You can also insert the same original PSD image multiple times in the 
site using different dimensions and image settings and even under different 
filenames. All the Smart Objects will stay connected to the PSD and will allow 
you to update them as the PSD changes. 


9 Save the file. 


As you can see, Smart Objects have several advantages over a typical image work- 


flow. For frequently changed or updated images, using a Smart Object can simplify 
updates to the website in the future. 
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Copying and pasting images 
from Photoshop (optional) 


As you build your website, you will need to edit and optimize many images before 
you use them in your site. Adobe Photoshop is an excellent program for performing 
these tasks. A common workflow is to make the needed changes to the images and 
then manually export the optimized GIF, JPEG, or PNG files to the default images 
folder in your website. But sometimes simply copying images and pasting them 
directly into your layout is faster and easier. 


1 Launch Adobe Photoshop, if necessary. 
Open matthew.tif from the lesson09/resources folder. 
Observe the Layers panel. 


@ Photoshop file Edit Image Layer Type Select Filter 3D View Window Help 
_ Adobe Photoshop 2020 
EL ~ Wx xReso...¥ 100 px wr 125 px 72 Dn SS Seok eS Qee) -Emi 


x © matthew.tif @ 100% (RGB/8*) 
€olor: Swatches 


Libraries HERS 


Layers. Cf 


ml © 
2. 
g. 
Ze 
a. 
hr. ¥ 
v. 


@ DOC: 325,6K/329.6K bf 


The image has only one layer. In Photoshop, by default you can copy only one 
layer at a time to paste into Dreamweaver. To copy multiple layers, you have to 
merge or flatten the image first, or you can select multiple layers in the Layers 
panel and use the command Edit > Copy Merged to copy the selected layers as a 
single image. 


2 Choose Select > All, or press Ctrl+A/Cmd+A, to select the entire image. 
3 Choose Edit > Copy, or press Ctrl+C/Cmd+C, to copy the image. 


4 Switch to Dreamweaver. 
Scroll to the image placeholder for Matthew and select the placeholder. 


Matthew Ridges 


Sree images/100X125.gif © W mary alt Generic placeholdel 
Link os ee 7k G@A # px ¥ 


© Note: You should be 
able to use any version 
of Photoshop for this 
exercise. But Creative 
Cloud subscribers can 
download and install 
the latest version at 

any time. 
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® Tip: When inserting 
images that are outside 
the default site images 
folder, Dreamweaver 
may try to save the 
image in its original 
location, which may be 
outside the site folder. 
When in doubt, use 
the Site Root button in 
the Save As dialog to 
focus the dialog on the 
site folder. Then select 
the images folder from 
there. 


Note the class assigned to the placeholder. 


There is no Element Display in Design view, but you can use the Class menu in 
the Property inspector or the tag selector interface to see the CSS class assigned 


to the placeholder. 
Press Delete to remove the image placeholder. 


When you select and delete an element in the layout, the cursor remains in the 


same position in the code. 


Press Ctrl+V/Cmd+V to paste the image from the clipboard. 


Matthew Ridges 


Matthew is our do-it-all guy. He takes care of 


lexperienced at helping people complete their 


Matthew Ridges 
Matthew is our do-it-all guy. He takes care of| 


xperienced at helping people complete thei 


Even though Matthew is good with numbers, Even though Matthew is good with numbers, 


Email Matthew at: matthew@FavoriteCity Tour 


Email Matthew at: matthew@FavoriteCityTouy 


The Image Optimization dialog appears. 
8 Choose the preset JPEG High For Maximum from the Preset menu. Click OK. 


Image Optimization 


Format: JPEG Ba ) 


e Help ) 


Quality. ~~ @) 80 


A file dialog appears. 


9 Navigate to the default site images folder. 
Name the image matthew.jpg. 


SEEeIreernneemnennmennneenene 
Save As: | matthew.jog Sea 


Tags. 


=~ CS M images of Q 


Name Date Moditied Size Kind 


URL: images/matthew.ipg 
Relative to: Document 8 contact-us. htm) 


y Change default Link Relw iv@ To in the site definition. 


Select file name from: Site Root 


New Folder C 
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You have now saved the image as a web-compatible JPEG file in the site 
images folder. 


10 Click Save. 


row div colvig-4 af list-unstyled fis media.nt-4. profile 


Class Cmediam... ~) W 300 px » A Alt 


Edit [Ps] oe He GA W375 ex ve 


Matthew’s image appears in the layout. Just like Margaret’s image, Matthew’s 
image is larger than the others, but it doesn’t need to be cropped. 


11 Click the image to select it. In the Property inspector, change the image dimen- @ Note: Raster images 
sions to 100px by 125px. Click the Commit icon to apply the change. Click OK can be scaled down in 
size without losing qual- 
ity, but the opposite 
12 If necessary, select the image for Matthew and enter Matthew, Information is not true. Unless a 
graphic has a resolu- 
tion higher than 72 ppi, 
scaling it larger without 
noticeable degradation 
may be impossible. 


in the dialog that appears, acknowledging that the change is permanent. 


Systems Manager in the Alt and Title fields in the Property inspector. 


13 Apply the .mr-3 class to matthew.png using the Class menu in the Property 
inspector. 


modal-lg 

modal-open 
modal-scrollbar-measure 
modal-sm 

modal-title 
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© Note: The exact 
name displayed in 

the menu may differ 
depending on the pro- 
gram version or operat- 
ing system installed. 


Tip: If no image- 
editor program is 
displayed, you may 
need to browse for a 
compatible editor. The 
executable program 
file is usually stored in 
the Program Files folder 
in Windows and in the 
Applications folder on 
a Mac. 


© Note: This exercise 
is geared specifically 

to Photoshop, but the 
changes can be made in 
most image editors. 


® Note: Although 
Dreamweaver automati- 
cally reloads any modi- 
fied file, most browsers 
won't. You will have 

to refresh the browser 
display before you see 
any changes. 


The image appears in the layout at the same size as the other images. Although 
this image came from Photoshop, it’s not “smart” like a Photoshop Smart 
Object and can’t be updated automatically. It does, however, give you an easy 
way to load the image into Photoshop or another image editor to perform any 


modifications. 


14 In the layout, right-click matthew.jpg. 
Choose Edit With > Adobe Photoshop 2020 from the context menu. 


Optimize... 


dit With) <> = ed 
Edit Original With > 
Add to Image Favorites 


Adobe Fireworks CS6__ 
Adobe P 10 eee 2020 


Properties 


Locate in Site 


Lin Edit [Ps] hm @=4 Hu 


Cut 


If Photoshop 2020 is not installed, select the program that is displayed. 
The program launches and displays the JPEG file from the site images folder. 


If you make changes to this image, you merely have to save the file to update the 
image in Dreamweaver. 


15 In Photoshop, press Ctrl+L/Cmd+L to open the Levels dialog. Adjust the bright- 
ness and contrast. Save and close the image. 


@ Photoshop File Edit Image Layer Type Select Filter 3D View Window Help BB @ 


Adobe Phe 


Point Samole . 
x Preset: Custom 


& matthew.jpg @ 300% (RGI 
Channek RGB ¥ Reset 


Input Levels: 
Auto 


Options... 


Foe 


Preview 


Output Levels: 


0 


16 Switch back to Dreamweaver. 
Scroll down to view Matthew’s image. 


The image should be updated in the layout automatically. Since you saved the 
changes under the original filename, no other action is necessary. This method 
saves you several steps and avoids any potential typing errors. 


17 Save the file. 


All the staff images are now complete. In the next exercise, you will insert an image 
using the Asset panel. 
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Inserting images using the Asset panel 


In many instances you will not have placeholder images marking the spots for your 
images. You will have to insert them manually using one of several tools in Dream- 
weaver. In this exercise you will learn how to use some of these tools. 


1 If necessary, open contact-us.html in Design view. 
Scroll down to the heading CONTACT FAVORITE CITY TOUR. 


This is one of three of the pages you've created that doesn’t have an image 
carousel. You will enhance the layouts on these pages by adding an attractive 
travel-related image and some marketing text promoting the quality of the staff, 
products, and services. 


2 Open difference-text.txt from the lesson09/ eee.  difference-text.txt 
A company is only as good as its people and we have 
resources folder. great people! We look long and hard to find people 


that will make a difference. We hire only the best 
and then we train them to deliver a difference every 


3 Select and copy all of the text. 
Close the file. 


day. 


4 Incontact-us.html, insert the cursor at the end of the headline. Press Enter/ 
Return to insert a new line. 


5 Paste the text copied in step 3. 


CONTACT FAVORITE CITY TOUR 


A company is only as good as its people and we have great people! We look long and hard to find people that will make a difference. 
We hire only the best and then we train them to deliver a difference every day. 


6 Choose Window > Assets to display the Assets panel, if necessary. Click the 
Images category icon [mal to display a list of all images stored within the site. 


7 Locate and select travel.jpg in the list. 


Tip: The Assets 
panel should be 
populated as soon as 
you define a site and 
Dreamweaver creates 
the cache. If the panel is 
empty, click the Refresh 
Site List icon at the bot- 
tom of the panel. 


® Note: You may need to drag the edge of the panel BOM Assets Snippets 
to widen it to see all the asset information. gs images: Q site © Favorites 
: ; a 
@ Note: The Images window shows all images stored 3 
anywhere in the defined site—even ones outside the H 
site’s default images folder—so you may see images Q 
stored in the lesson subfolders too. 
ina 
A preview of travel.jpg appears in the Assets San Ge Se 
: ‘ U 1 i Nal st-martin-carousel-finished.jpg 1920x500 362KB 
panel. The panel lists the image’s name, dimen i a a ee eae. 
sions in pixels, size in kilo- or megabytes, and er timessquare.jpg 1200x315 141KB 
travel-finished.jpg 1200x597 193KB 
file type, as well as its full directory path. 2 travelipo 1200x597 193KB 
faa) venice-carowsel~finished.|pg 1920x500 218KB 


8 Note the dimensions of the image. 


The image is 1200 by 597 pixels in size. You 
will insert the image at the beginning of the paragraph. 


Bec? 


Format 
IPG 
Jpg 
jpg 
Jpg 
ipg 
JPg 


Full Path 
/finished /images 


/finished/images 
/images/timessq 


/finished /images 


images /travel.jp 


/finished/images 


Cc hn 
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9 Insert the cursor at the beginning of the paragraph. 


10 At the bottom of the Asset panel, click the Insert button. 


contact-ws.huet 
Souren Code? bontstrap-4.3.1.¢08  Favorite-styies.cas — Jquery-3.3,1.minjs — popperminjs — haotstrape4.3.1 49 Y 


CONTACT FAVORITE CITY TOUR 


The selected image appears below the heading and fills the layout from edge 


to edge. 


Before mobile devices were introduced, a web designer had to determine only the 
maximum dimensions of an image and then resize it to fit the space. Each image 
had to be only one size. 


Today, images have to fit a variety of screen sizes interactively. Each image that 
doesn’t threatens to destroy the carefully constructed layout. Fortunately, Bootstrap 
provides built-in features that can control and adapt the display of images automat- 
ically, but to see how these features work you have to use Live view. 


Adapting images to mobile design 


The advantages of using a web framework like Bootstrap is it does most of the hard 
work for you. And one of the most difficult functions is adapting web images to 
mobile design. Dreamweaver taps into much of this power right in the interface. 
1 Switch to Live view. 

Make sure the document window is at least 1200 pixels in width. 


The image travel.jpg stretches past the edge of the layout. To make the image 
honor the Bootstrap layout, you simply have to make it a Bootstrap component. 
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2 Select the image travel.jpg. 


eee Code Split Live + 


x contact-us.honl? 


a Sources Code boorstrap-4.3.h.css —_ favorite-styles.css jquery-3.3.1L.minjs — popper.min.js _bootstrap-4.3.1.js ¥ 


The Element Display appears on the img element. Note that the image has no 
special classes applied to it. 


3 Click the sandwich icon E23. 
The Quick Property inspector appears. 


4 Select the Make Image Responsive checkbox. 


CONTACT 


CONTACT 


 ) 


a7 ees 


i 
|} HTML 


images /travel.jpq sre images/travel.jpg 


alt 


| width 1200 width 1200 


height 597 height 597 


link 


| fink 


BOOTSTRAP BOOTSTRAP 


Clip to Shape ©) () [j Clip to Shape ©) (1) C} 


Make Image Responsive 


Ci make tmage Responsive 


The image resizes to conform to the width of the column. It no longer extends 
beyond the edge of the screen. This is not a Dreamweaver trick. Note the new 
class . img-fluid applied to the img element. The image is now a Bootstrap 

component and will conform to any structure that it is inserted into. But what 


happens when the screen gets smaller? 
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5 Drag the scrubber to the left to make the document window narrower. 


ROP ct RE RE ia i i 
CONTACT FAVORITE CITY TOUR Double cc to Rewath PPD 


A company is only as good as its people and we have great people! 
to find people that will make a difference, We hire only the best and then we train them to 
deliver a difference every day. 


(| "9g on Elaine Rendel 

pinacetleina tenn’ poay mésrastance editable @® 7e8xso7 ~ [Bp 
As you drag the scrubber, the layout changes and adapts to the smaller screen. 
The multi-column design converts eventually to a single column. The travel.jpg 
image scales down seamlessly with the layout. 


6 Drag the scrubber all the way back to the right. 


The layout changes again and returns to its original multi-column design. The 
image looks nice, but it is butting up tightly against the text. It could use some 
extra spacing. 


You have used the .mt~-3 class several times to add margin spacing at the top of 
various elements. In this case, you need extra margin spacing at the bottom of 
the element. If you had to guess what Bootstrap class name would add bottom 
margin, what would it be? 


7 Click the Add Class/ID icon [+]. 


8 Add the class .mb-3 to the img element. 
CONIAUILF eee CUONIAUCI FA 


difference. We hire only the best and then we train th A company is only as good as its people and we have), 
_ difference. We hire only the best and then we train the 
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The class stands for margin-bottom. This Bootstrap class adds extra margin 
space at the bottom of the image. By adding two Bootstrap classes, you have 
adapted the image to the layout and added additional spacing below it. 


9 Save the file. 


Let’s add similar images to the other pages that do not have image carousels. 


Using the Insert menu 


The Asset panel is a handy visual way to find and insert images stored within the 
site. Another tool for inserting images, other HTML elements, and other compo- 
nents is the Insert menu. 


1 Open about-us.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 
ene Code Split Live ~ 


* about-us.htmi" 


B Source Code > bootstrap-4.3.1l.css _favorite-styles.css — jquery-3.3.l.minjs  popper.minjs _—bootstrap-4.3.1 js \ ¢ 


_ Geta Quote | .. Booka Tour — Bargain 
a “ eo Siawee Deals 


ABOUT FAVORITE CITY TOUR 
"Travel with a Difference” is not just our motto, it’s the way we do business. Here at Favorite City Tour we take travel 
seriously. Unlike other tour companies who have guides who lead tours of several cities, each of our guides has one city 
for which they specialize. Our tour guides and leaders have lived in their city for five years or more. They know every 
neighborhood and attraction like the back of their hands. We live and breathe a city, and so will you. 


The About Us page has a text block describing the history and mission of Favor- 
ite City Tour. Like the Contact Us page it does not have an image carousel. Let’s 
add an image above the text block. 


2 Insert the cursor in the text that starts “Travel with a Difference” is not just 
our motto. 


The Element display appears with an orange box around the first paragraph. 
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3 Choose Insert > Image. 


@ Dreamweaver File Edit View Insert Tools Find Si 


Edit View Tools Find Site Windo' 


File 


@ Dreamweaver 


“| |@¢6@ 


* about-us.html* 


*% about-us.hunt Paragraph 
“Source Code bootstrap-4.3.1.¢55 Heading > 4 is) Source Code bootstrap-4.3.L.css favorite-styles.css jquery- 
‘ Eee Fl Seal 
4 Figure 
Unordered List 
Ordered List 
List Item 
7 Hyperlink ; 
“Travel with a Difference Header ust our motto, 
seriously. Unlike other t« Navigation 09 Ld coal eas a oes who hav 
for which they specialize fon | insert bofore the ‘selected tag | ir guides and |i 


neighborhood and attraction like the back of thé 


neighborhood and attra¢ article 


The Position Assist dialog appears. 
4 Click Before. 

A file window opens. 
5 Select timesquare.jpg from the lesson09/images folder and click OK/Open. 
U | FAVORII E CITY TOUR a 


"Sy i % . 
a 


saekevet 


“Travel with a Difference” is not just our motto, it's the way we do business. Here at Favorite City Tour we take travel 


seriously. Unlike other tour companies who have guides who lead tours of several cities, each of our guides has one city 
for which thev specialize. Our tour auides and leaders have lived in their citv for five vears or more. Thev know everv 


The image timesquare.jpg appears above the paragraph. Like the previous 
image, it stretches across and off the layout. 


6 Click the sandwich icon 4. 
Select the option Make Image Responsive. 


The image timesquare.jpg resizes to fit the column. 
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7 Add the class .mb-3 to the img element. 


Pal none don omunemaeusEne 


ABU UR 


Hu 


' seriously. Unlike other tour companies who have guides who lead tours of several cities, each of our guides has one city 


The class adds margin spacing below the image. 
8 Save the file. 


The Insert panel duplicates key menu commands and makes inserting images and 
other code elements quick and easy. You can even dock it to the top of the docu- 
ment window to have it available all the time. 


Working with the Insert panel 


Some users find the Insert menu fast and easy to use. Others prefer the ready 
nature of the panel, which allows you to focus on one element and quickly insert 
multiple copies of it at once. Feel free to alternate between the two methods as 
desired or even use the keyboard shortcut. 


In this exercise, you will use the Insert panel to add an image to one of the pages. 


1 Open events.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


Get a Quote Book a Tour Bargain Deals 


OUR FAVORATE FESTIVALS AND SEMINARS 


| Want to see how the world parties? Want to learn a new language? There’s no time like the present, Check out our list of international festivals and | 
local seminars. The schedule is updated on a regular basis, so you may want to bookmark this page and check it often. Hope to see you soon! } 


| 2020 INTERNATIONAL FESTIVAL SCHEDULE 
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The Events page features two tables, one listing international festivals and 
the other seminars given by Favorite City Tour. The text block provides a 
quick overview of the information on the page. Let’s add an image above the 
text block. 


2 Insert the cursor into the text that starts Want to see how the world parties? 
3 Choose Window > Insert. 


The Insert panel appears. The panel is part of the Standard workspace, so it 
should be docked to the right side of the document window. 


4 Inthe Insert panel, choose the HTML category from the dropdown menu. 


ii 


Files CC Libraries Insert USS Designer Files CC Libraries insert CSS Designer 


» HTML 
Form 


ie) 
Bootstrap Components a sa 
jQuery Mobile lad image 
jQuery UI 
: P h 
Favorites . Seen 
[RD + Heading 

Hide Labels 

fezy oo oarouser Table 

i + Cards "Figure 


QJ ~ Responsive tmage ul Unordered List 


5 Click the Image button in the Insert panel. 
The Position Assist dialog appears. 

6 Click Before. 
A file dialog appears. 


7 Select festivals.jpg from the site images folder. 
Click OK/Open. 


The image festivals.jpg appears in the layout. You can add the Bootstrap classes 
using the Element Display. 


8 Add the class .img-fluid to the img element. 
Add the class .mb-3 to the img element. 


img-fluid 
; mg-thun nail 
He sy 


The image festivals.jpg resizes and repositions itself properly in the layout now. 
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9 Save the file. 


On each of the pages you can see three small image placeholders in the links under 
the header or image carousel. If you try to select these placeholders, you'll discover 
that they are not part of the editable page. To update them, you'll have to open 

the template. 


Inserting images in the site template 


The only image that’s part of the site template is the company logo, but that was 


added to the page before it was converted. Inserting images into the template is not 


much different from working in a child page. 


1 


Open favorite-temp.dwt from the lesson09/Templates folder in Live view. 
Make sure the document window is at least 1200 pixels wide. 


Scroll down to the three links that appear below the image carousel. 


Get a Quote Book a Tour F Bargain Deals 


ADD HEADLINE HERE 


Add content here. 


Select the first placeholder. 


In Live view, a bug in Dreamweaver prevents you from interacting with any part 
of the layout. Until this bug is fixed, any work in the template will have to be 
done in Design or Code view. 


Switch to Design view. 
When you switch, you may need to scroll back to the links. 
Select the first placeholder for the link Get a Quote. 


Notice that the placeholders are not round in Design view. The round shapes 
are created by the CSS property border-radius. Since this is an advanced CSS 
property, it is not supported in Design view. 


In Design view, you can replace images by double-clicking them. 
Double-click the placeholder. 


A file window appears. 
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7 Select quote.jpg and click OK/Open. 


Name 


@ sarah.jpg 
== san-francisco-cruise.jpg 
=< rome-tour-carousel.jpg 


= paris-tour-carousel.jpg 
Get a Qu 2 ny-tour-carousel.jpg 
~~ a nenccet = ny-cruise-carousei.jpg 
#2 ny-city-tour.jpg 
| == miami-cruise-carousel,jpg 
Rank a Te © matthew.ioa 


Get a Quote 


Hons 


Rank a Tour 


The image quote.jpg replaces the placeholder. You can also use the Property 
inspector to select the replacement images. 


8 Select the second placeholder. 


In the Property inspector, click the Browse icon tai in the Src field. 


9 Select book.jpg and click OK/Open. 


& votre 
dL elaine. iog 
Fybook jog 
@ bargaining 
sm athens-tourjpg 
1920x500.gif 
A400X200.gif 
100X125.aif 


Book a Tour 


images /40x40.9it € ES Chass 


i 


The image book.jpg replaces the placeholder. You can also insert images using 
Code view. 

10 Select the third placeholder. 

11 Switch to Split view. 


The placeholder code is highlighted in Code view. Note the src attribute. It’s 
pointing to ../images/40X40.g7f. In Lesson 3, “Working with Code,’ you 
learned that Code view can help you preview assets and write the code itself. 


12 Position the cursor over the image reference 40X40. g7f. 


<div class="row"> 
<div class="col-2"><img ¢lass="rounded-circle" alt="Free Shipping" s/c="./images/40X40.gif"> </div> 
<div class="col-lg-6 col-10 ml-1"> 
<h4>Bargain Deals&nbsp;</h4> 


</div> os 
</div> — 
</div> 
</div> 
Aine: 40% 40 pixels 
serene 
beady div .container © diy row diy tol-4 diy row div .col-2 


“> rounded~circle 


A preview image of the placeholder pops up next to the cursor. 
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13 Select and delete only the image reference 40%40+¢4£ 
14 Type bar 


hipping" src="../images/40X40.gif'></div> hipping" src="../images/'></div> hipping" src="./images/barf'></div> 


I I : ~/images/bargain jpg 
id-circle Q ut 
As you type, code hinting appears displaying the name of an image file that 
matches the text being entered. You can continue typing the rest of the name if 
you want or simply press Enter/Return to complete the image source. 
15 Press Enter/Return to complete the image name as suggested. 
The image reference bargain. jpg appears in the code. ® Note: The image 


may not appear in Live 


16 Position the cursor over the reference bargain. jpg. View lnaltne disney 


refreshes. 
fe! | ] 
eae Ms ——— 
95 ¥ <div class="row"> 
<div class="col-2"><img class="rounded-circle" alt="Free Shipping" src=". /images/bardain.jpg'></div> 
7 ¥ <div class="col-lg-6 col-10 ml-1"> 
- <h4>Bargain Deals&nbsp;</h4> 
</div> 
</div> 
</div> 
</div> 
Edive 40 * 40 pixels 


saoeennemnemeienonononecr 


xncence 
body div container div row div col-4 div row div col-2 Bune 


-rounded~circle 


A preview of the image appears beside the cursor. The three placeholders are 
now replaced. Note that the images are square in shape. 


17 Switch to Live view. 


‘?) Get a Quote ‘~S) Book a Tour ‘C) Bargain Deals 


ADD HEADLINE HERE 


Add content here 


The new images appear in the link section. The advanced CSS properties are 
supported in Live view, and the buttons are now round in shape. The last step to 
the process is to update all the child pages. Remember that template commands 
work only in Design or Code view, or when no files are open. 


18 Switch back to Design view. 
Choose File > Save. 
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The Update Template Files dialog appears, listing all the child pages that will be 
updated. 


Find Tools Find Site Window Help 


@ Dreamweaver 


@ lew insert Tools 


New... 36N Code 
2S Open... #0 


* tontact-us.hunt i Open Recent > # xX favorite-temp.dwt 


eS.c5$ jquery~3.3.1.rin,js popper.minjs bootstrap~4,3.1.js 
Close ew 


Close All ae 7 
Saves 3 
Save As... O#S 


Save All @ Update Templste Files 
Save All Relatec Pies Update ail files based on this template? oo 
Save as Template... Reoicee nut : 
Revert tours.html oc 
contact-us.html i 
Book a T Attach Style Sheet... about-us, html ' 
Import > events.html aa 
ie: Export > 
Rarnain | Print Code... 36P 


19 Click Update. 


X contact~ushtmif & about-us.homi * eventshtmit * favorite-temp.dwt 


bootstrap-4.2 ee oe Update Pages : 


Look in: [ Files That Use... v} favorite-temp, cruises, to... fone 


Update: {[] Library items Close } 
Geta Quote © Templates Ca 
Hf 
Book a Tour x 


Updating NewRoad:MacProjects:Peachpit:DWCC2020:webs:DWCC2020:Lessons:lesson09: —— 
updated about-us. htm! 

updated events.html 

updated contact-us.htmi 


7 . ' updated cruises.html 
Bargain Deals _ spdates tours.tmi 


Done, 
re files examined: 5 a! 
aa files updated: 5 —— 
files which could not be updated: 0 
total time: (0:00:01) 


The Update Pages dialog appears. If necessary, click the Show Log option to 
observe the progress of the update. If successful, all five child pages should be 
updated. You may notice that the three pages you had open display asterisks on 
their document tabs. This tells you that the pages were updated but not saved. 
Let’s see if the link images were added to these pages successfully. 


20 Close the Update Pages dialog. 
Click the document tab for contact-us.html. 
Examine the link section. 


The button images were added to the link section on this page. 
21 Switch to and check about-us.html and events.html. 


All three pages were updated successfully. But you may have noticed that the link 
section butts up against the header when there is no carousel. To add extra spacing 
above it, you can use the class .mt-3 again, but since the link section is not in an 
editable region, you have to add it in the template. 
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Adding CSS classes to template structures 


You can see how the link section butts up against the header when the image 
carousel is removed from the page. In fact, you have added the class .mt-3 to 
content sections on several of the pages to address this issue. Since this will be a 
problem every time you create a new page, it’s best to address it in the template. 


In this exercise, you will add the class to the link and the content sections as 
needed. 


1 Switch to favorite-temp.dwt. 
If necessary, scroll to the image carousel. 


You should still be in Live view. There is a bug in Dreamweaver that sometimes 
makes it difficult or impossible to select elements in the document window in a 
template. If you cannot directly select elements in the window, you can use the 
DOM panel. 


2 Click the image carousel. @ Note: It may be dif- 
ficult to click the image 


The Element Display should appear focused on one of the image placeholders. Cuenta viene 


3 Choose Window > DOM. jf You may need to select 
4 it in the DOM panel 
The DOM panel appears. If you were able to select the image carousel in instead. 


step 2, one of the image placeholders should be highlighted. If not, you can 
use the panel to locate the component. It should appear within the element 
mmtemplate : 7 ie DOM Assets Shippets = 


> [nav>, navbar .navbar-expand-lg .navbar-dark .bg-dark 
> [Readety row 
5 


4 If necessary, expand the structure of the element 
mmtemp Late: if in the DOM panel. 


Inside the element, you should see > (erie 
. ~ [div> .container .mt-3 
mmtemplate:editable. + (ED tou 
5 If necessary, expand the structure of the element ¥ col-12 


- #carouselExampleControals .carousel 
> [oly .carousel-indicators 

Note that the first child of the editable region is v [Biv .carousel~inner 

div.container.mt-3. » [div> .carousel-item .active 


[img> .d-block w-100 


mmtemplate:editable. 


6 Click div.container.mt-3 in the DOM panel. 


himl* * about-us.htmi" X events.htmi* x favorite-temp.dwt* 
Files CC Libraries Insert CSS Designer rt 


‘ode bootstrap-4.3.1.css favorite-styles.css jquery~3.3.1.min.js pe 7 % A DOM Assets Snippets = 


50 100 1 200 2) 266 ee ED S 
eas Ea ee ape j e nav Pp ne we ary a aa 
Eid «container | i =e > [Rav> navbar .navbar-expand-lg .navbar-dark .bg-dark 


eee 


hea 

> [Lheader> row 

- | mmtempiate if > 

v | mmtemplateseditable 
+ > [> container .mt-3 


div ain 
IVY, container 


> 
> | mmtemplate:editable 
peecortenrsricetetceresecesrscesesemeseeees/_ 


NL CATEN ere nent enka eo Rebs iee 
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The Element Display should appear on the image carousel focused on 
div.container.mt-3. This element already has the class .mt-3, so we can 


move on to the next content section. 


7 Collapse mmtemplate:7f. 


The next element below mmtemplate: if is div.container. 


8 Click div.container in the DOM panel. 


x “Us. pes “us. wees ex Cf ite-temp.dwt* 3 
contact-us.himt about-ushtml events.htm! favorite-temp.dw' Files CC Libraries Insert CSS Designer 


favorite-styles.css 


bootstrap-4.3.1.css Jquery-3.3.1.minjs poppy DOM Assets Snippets 


» (im 
> (Feady 
- aD 


Eli onsine J] 
2) Geta Quote > (Resdely ow 
> 
- nl 
+ > [dixy container 
> mmtemplats.edntabley, 


The Element Display appears in the document window focused on 
div.container. This is the link section, and you can see that it doesn’t have 


the class .mt-3 applied to it. 
9 Inthe DOM panel, double-click the class .container. 


10 Enter .mt-3 in the DOM class field. Make sure you insert a space between 
the classes. 


11 Press Enter/Return to complete the change. 


Files CC Libraries Insert CSS Designer Files CC Libraries Insert CSS Designer | 


DOM Assets Snippets Bi DOM Assets Snippets 
. . 
. . 


> [nay>, navbar snavbar-expand-ig .navbar-dark .bg-dark 
> [Reade row 
> 

Fn nef 


+ > div [.container.mt-{ 


I coochsheneinncetehetstanteniberccreseeee rene 


> [mmtemplate:editable smt-0 
SY 


> [div> container .bg-darl «mt-1 


hi 
> [Reade ow 
> 
———— 
+ > [VD container .mt-3 
> mmtemplateeditablo® 
a ee reonaaaemrererenemneeeel 


> [div container .bg-dark .p-4 


: antes > 
amt-4 
ant-5 
one 


The DOM and tag inspector display now show div.container.mt-3. 
The next three sections are part of the MainContent editable region. 


12 Expand the structure of the element mmtemplate: if in the DOM panel. 
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> [Pav>, navbar .navbar-expand-lg .navbar~dark .bg-dark 


th it 


> {nav «Navbar .navbar~expand-lg .navbar-dark .bg-dark 


13 If necessary, expand the elements mmtemplate: editable and main.wrapper. 


x contact-ushimh  X about-ushtmt x events.hemit x favorite-temp.dwt* 


@ s 


Files CC Libraries Insert CSS Designer 
Y 0M Assets Snippets : = 
 ~ [mb 
y 

> {hay navbar .navbar-expand-ig .navbar~dark .bg-dark 

> [Reade row 

> [ImtemplateriPy 

serene 
> [BY container mt-4 
~ [ mrtemplateceditable 


bootstrap~4.3.L.css favorite~styles.css Jquery~3.3.1.minjs popper.mingas 


Add content here. 


container 
container 
> [a container .bg-dark .p-4 


Once the editable region is expanded, you will see the three content sections. 
The change is pretty straightforward from here. 


14 Add the .mt-3 class to all three div. container elements. 


> [Nav .navbar .navbar-expand-ig .navbar-dark .bg-dark 
> [Reader .row 
> 
> Lay, container .mt-4 
» [ mmtemplate:editable 
i wrapper 
> (a> container me-3 
> [aiv> container .mt-3 


Add Name Here 


Cras sit amet nibh libero, in 
A005 125 gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin. 
Cras purus odio, vestibulum in 
vulputate at, tempus viverra 


Es 

> [si container ngedark ‘> 
All the content sections now have the .mt-3 class. 

15 Choose File > Save. 


The Update Template Files dialog appears, listing all the child pages that will 
be updated. 


16 Click Update. 


 @ Dreamweaver file Edit View Insert Tools Find Site Window Hel 


Update Pages 
a a ec ese 
i Look in: | Files That Use... v | - favorite-temp, cruises, to. Done 
ae et ae a Xx contactous.himl’ x about-us.htmi’  X eventsitml’  < favorite-tomp.dwt 
Update: {) Ubrary items ESP Rasanasaee favorite-stytes.css — jquery=3.3.1.minfs — popper.min 
Templates 3} 
Show log Done 


Updating NewRoad:MacProjects Peachpit: OWCC2020:webs DWCC2020:Lessons'lesson09. 
updated about-us. html 
updated events.html 
updated contact-us.htmt 
updated cruises.htmi 
updated tours.htent 
Done. 
files examined: 5 
files updated: $ 
files which could not be updated: 0 
total time: (0:00:00) 


All five child pages should be updated. Asterisks appear in all the document 
tabs except the template favorite-temp.dwt. 
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As you learned in Lesson 7, “Working with Templates,’ when a template is 
saved, only the locked portions of the page are updated. If one of the editable 
content sections did not have the .mt-3 class before the update, it still won't 
have it now. But by adding the class to the template, any child pages created 
from this point forward will have the class assigned to them. 


17 Choose File > Save All. 
The asterisks on the document tabs disappear. 
18 Choose File > Close All. 


Next you'll learn how to add images to the image carousels. 


Adding images to a Bootstrap carousel 


At the moment, two of your site pages contain image carousels. In this exercise, you 
will learn how to insert images into the Bootstrap carousel. 


1 Open tours.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


‘The page contains an image carousel and six tour descriptions. In Live view, 
you can see the carousel animation as one image placeholder slides across the 
screen replacing another. Note that each slide also contains some text elements. 


2 Click the image carousel. 


emma umammemmmeeectemammmaneenen es ee TE RETR STR IS PIT NIT A RTT TOL TTT TTT EAST DONT 


eS aN ROR Cer men CSI Y MN) 


SHEP, 
ve 1 aeblock w-100 @ 1234x468 -~ [By 


‘The carousel is in the editable optional region and should be selectable. 
Depending on where you click, the Element Display appears focused on one 
of the image placeholders or on part of the carousel structure. 


Although you learned how to insert images in Live view, the carousel offers a 
unique challenge. How do you select and replace a moving object? Although it’s 
possible to do so in Live view, using Code view will be much easier. 
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3 Switch to Code view. 


44% <div id="carouselExampleControls" class="carousel slide” data-ride="carousel"> 

45 ¥ <ol class="carousel-indicators"> 

46 <li data-target="#carouselExampleControls" data-slide-to="0" clr > 

az <li data-target="#carouselExampleControls" data-slide-tox"1">¢ 

48 <li data-target="#carouselExampleControls" data-slide-to="2">< 

49 </ol> 1920500 pixels : 
50 ¥ <div class="carousel-inner"> LEELA. AES 
51¥ <div class="carousel-item active"> <img class="d-block w-100" src="images/19207500.gif" alt="First slide"> 
52 ¥ <div class="carousel-caption d-none d-md-block"> 

53 <hS>Item 1 Heading</hS> 

54 <p>Item 1 Description</p> 


Dreamweaver highlights the code of the selected element. The carousel contains 
three placeholder images. Since the carousel rotates, you may have selected 

any of the three placeholders. Locate the first <img> element in the element 
<div class="carousel-inner">, around line 51. Notice the filename. All the 
placeholders use the same placeholder image, 1920x500.gif. You will replace 
each one with a different image. 


4 Select the code 1920x500. gif and enter London 


<img class="d-block w-100" sros"images/ SBE aaa alt= "First slide"> 


| <img clgés="d-block w-100" src="images/london" a ide"> 
bne d-md-block"> ‘ir 


e.d-nid-block™> - images/london-tour-carousel.jpg 
images/london-tour.jpg 


aes w-100" src="images/1920x500.gif" alt="Second slide"> ylass="d-block w-100" src="images/1920x500.gif| 


ne d-md-block"> pne d-md-block"> 1920 x 500 px 
As you type, the hinting menu appears and displays any filenames that match > Tip: When more 
what you are typing. A preview image of the highlighted file appears above or than one filename 


below its name. 


appears in the hinting 
list, press the up or 


5 Select Llondon-tour-carousel. jpg in the hinting menu. down arrow key to view 
the preview of the other 


The London image reference has replaced the placeholder image. Note that images. 
there are heading and description placeholders within the same structure. 


6 Select the heading Item 1 Heading. 
Type: London Tea to replace it. 


0 ¥ <div class="carousel-inner"> <div class="carousel-inner"> 
51 ¥ <div class="carousel-item active"> <img class="d-b <div class="carousel-item active"> <img class="d-blq 
52 <div class="carousel-caption d-none d-md-block"> / <div class="carousel-caption d-none d-md-block"> 
3 y <h5>Item 1 Heading</h5> <h5>London Teak/h5> 
54 <p>Item 1 Descriptioh</p> <p>lItem 1 Description</p> 
</div> </div> 
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7 Select the text Item 1 Description. 
Type High tea and high adventure in London towne to replace it. 


¥ <div class="carousel-item active"> <img class="d-block w-100" s: c="images/london-tour-carousel.jpg" 
52 <div class="carousel-caption d-none d-md-block'"> 
<h5>London Tea</h5> 
<p>High tea and high adventure in London towne</p> 
S55 </div> 
</div> 


The first carousel element is complete. 
8 Locate the second carousel placeholder image, around line 57. 
9 Replace 1920x500.gif with venice-tour-carousel. jpg. 


10 Replace Item 2 Heading with Back Canal Venice. 
Replace Item 2 Description with Come see a different side of 
Venice. 


57 ¥ <div class="carousel-item"> <img class="d-block w-100" src="images/venice-tour-carousel.jpg" 
58 ¥ <div class="carousel-caption d-none d-md-block"> 
: <h5>Back Canal Venice</h5> 
60 <p>Come see a different side of Venicek/p> 
</div> 
</div> 


The second carousel element is complete. 
11 Locate the next image placeholder element, around line 63. 


12 Change 1920x500.gif to ny-tour-carousel. jpg. 
Change Item 3 Heading with New York Times. 
Replace Item 3 Description with You’ve never seen this side of 
the Big Apple. 


You've replaced all the carousel placeholders. Let’s review the changes. 


13 Save the file. 


14 Switch to Live view. Make sure the document window is at least 1200 pixels 
wide. Observe the image carousel. 
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The three images slide from right to left, pause for a moment, and then slide off as 
they are replaced by the next image. The images look great, but the headings and 
descriptions are muted and kind of lost in the details of the images. They need to 
be given a little more emphasis. 


Styling headings and text in 
a Bootstrap carousel 


The text headings and descriptions are hard to read on top of the images in the 


carousel. Let’s tweak the styling with some custom CSS. 


1 


If necessary, open tours.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


Select the heading on one of the images in the carousel. 


The Element Display appears focused on the <h5> element. Since all the head- 
ings are <h5> elements, you can select any of them to style all of them. As 
always, the first step in modifying CSS styling is to check to see if there are any 
existing rules styling this element. f 


In CSS Designer, click the Current button. 
Inspect the rules displayed in the selector pane. 
Identify the rule or rules responsible for the styling of these headings. 


There are three rules targeting <h5> elements. But these do not sup- 
ply the specific styling seen in the carousel. That can be found in the rule 
.carousel-caption. 


In CSS Designer, select the All button. 


Choose favorite-styles.css in the Sources pane. 
Click the Add Selector icon *. 


A new selector appears in the Selectors pane targeting the carousel caption 
element, but the selector is too specific. 


Edit the selector name to .carousel-caption. 
Press Enter/Return to complete the selector. 


)» Tip: Unless you know what the other classes do, it’s a good practice not to use them ina 
selector. Leaving them in the name could reformat other elements unintentionally. 


Create the following properties in .carousel-caption: 
font-size: 130% 
font-weight: 700 
text-shadow: Opx 2px 5px rgba(0, 0, 0, 0.8) 
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boa 


Files CC Libraries insert CSS Designer se 


.€S5* jquery~3.3.i.minjs popper.min.js bootstra All Current 


+ — Sources | + — Properties i 
a ALL SOURCES & Show Set 
2 bootstrap-4.3. Less ( Read Only ) | more 
favorite-styles.css i 
font-size : 130% i 
+ @Media __ font-wei 


GLOBAL 


+ — Selectors 
PL Fitter CSS Rules 


table caption 


sprofile 
.carousel-caption i 
All Mode: Lists rules for entire document 


The increased font size and text shadow make the text easier to read. But the 
<h5> element did not get any bigger. That means another rule is blocking the 
new styling. A separate rule targeting the <h5> should do the trick. 


8 Create the following rule: .carousel-caption h5 


9 Inthe rule .carousel-caption h5, add the following properties: 
font-size: 130% 
font-weight: 700 


~ bootstrap-4.3.1.css_ ( Read Only } 


favorite-styles.css | Bhore 
' font-size 

+ @Media - font 

GLOBAL is 


profile 
carousel-caption 
.carousel-caption hs 


All Mode: Lists rules for entire document 


The heading resizes and appears bolder. The text is much more readable now. 


10 Choose Save All. 


You have learned several ways to insert and work with images in this lesson. It’s 
time to put those skills to the test. 


Self-paced exercise: 
Inserting images in child pages 


You've replaced image placeholders and inserted images in Live view, Design view, 
and Code view. In this self-paced exercise, you will finish the pages tours.html and 
cruises.html by replacing the placeholder images remaining in the file. 
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1 


2 Using any of the techniques you have learned in this lesson, replace the place- 
holders as indicated: 
London Tea: london-tour.jpg 


3 


% tours.html* 


London Tea 
If you have never experienced 
high tea, you need to take this 
tour. This is a side of London 
unseen by most. 


Get More info 


bootstrap~4.3.1.css favorite-styles.css* 


If necessary, open tours.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


French Bread: paris-tour.jpg 

When in Rome: rome-tour.jpg 

Chicago Blues: chicago-tour.jpg 

Dreams of Florence: florence-tour.jpg 
Back Canal Venice: venice-tour.jpg 

New York Times: nyc-tour.jpg 

San Francisco Days: sf-tour.jpg 
Normandy Landings: normandy-tour.jpg 


iquery~3.3.i.minjs popper.minjs — bootstrap~4.3,1)s 


French Bread 


Have you ever smelled French 
bread fresh from the oven. You 
can’t get this experience in 
some high-rise hotel. 


Get More Info 


The placeholders have all been replaced. 
Choose Save All. Close the file. 


4 If necessary, open cruises.html in Live view. 


5 Use the following content in the carousel for Item 1: 
Item 1 placeholder: san-francisco-cruise-carousel. jpg 
Item 1 Heading: Coastal California 
Item 1 Description: Monterey to San Francisco, nuff said! 


Nine tour descriptions on the page contain image placeholders. 


When in Rome 


For centuries the heart of 
western civilization was Rome. 
Come home and see where 
everything started. 


Get More Info 


Make sure the document window is at least 1200 pixels wide. 


This page features an image carousel and three cruise descriptions. 


997x543 ~ [ag 
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6 Use the following content in the carousel for Item 2: 
Item 2 placeholder: ny-cruise-carousel. jpg 
Item 2 Heading: Bean to Big Apples 
Item 2 Description: Come see a new perspective of Boston and 
New York 


7 Use the following content in the carousel for Item 3: 
Item 3 placeholder: miami-cruise-carousel. jpg 
Item 3 Heading: Southern Charm 
Item 3 Description: Breathtaking views and amazing seafood 


8 Using any of the techniques you have learned in this lesson, replace the cruise 
placeholders as indicated: 
Coastal California: sf-cruise.jpg 
Beans and Big Apples: nyc-cruise.jpg 
Southern Charm: jacksonville-cruise.jpg 


* cruises.html® 


Source Code bootstrap-4.3.1.css favarite-styles.css jquery-3.3.L.minjs popper. min,}s bootstrap~4.3.1.js ¢ 


OUR FAVORITE CRUISES 


Our cruises are a cut above. Our ships are smaller, maxing out at only 200 travelers. That means we can get into smaller 
ports and see things you've only dreamed about. 


ps BRR eee eres 


Coastal California Beans and Big Apples 7 Southern Charm 
Some say the coast off i Approach Boston and New York ; Nothing prepares you for seeing 
| Monterrey is one of the most : from the sea and you will never ; Savannah and Charleston from 
| beautiful in the world. Top off : think of these towns in the same : the water. Breathtaking views 
the trip in San Francisco. : way again. are common. 


Get More Info Get More Info Get More Info 


» card-ima-top @® 997xsas - [ey 


The placeholders have all been replaced. 
9 Choose Save All. Close the file. 


Congratulations! You've learned how to work with web-compatible images in a 
variety of ways in Dreamweaver, including inserting images into a layout, replac- 
ing image placeholders, making them responsive to various screen sizes, as well as 
resizing and cropping them. You also learned how to work with Photoshop Smart 
Objects and how to copy and paste images from another program. 
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Dreamweaver's graphic tools 


All Dreamweaver's graphic tools appear in the Property inspector when an image is 
selected in Design view. Here are the seven tools: 


GA Edit—Opens the selected image in the defined external graphics editor if you 
have one installed. You can assign a graphics-editing program to any given file type 
in the File Types/Editors category of the Preferences dialog. The button’s image 
changes according to the program chosen. For example, if Photoshop is the editor, 
you'll see a Photoshop icon. If it’s not installed, you will see a generic edit icon. 


Po Edit Image Settings—Opens the Image Optimization dialog, allowing you to 
apply user-defined optimization specifications to the selected image. 


ba Update From Original—Updates any placed Smart Object to match any 
changes to the original source file. 


Oo Crop—Permanently removes unwanted portions of an image. When the Crop 
tool is active, a bounding box with a series of control handles appears within the 
selected image. You can adjust the bounding box size by dragging the handles or 
by entering the final dimensions. When the box outlines the desired portion of the 
image, press Enter/Return or double-click the graphic toapply the cropping. 

7 
ad, Resample—Permanently resizes an image. The Resample tool is active only 
when an image has been resized. 


@ Brightness And Contrast—Offers user-selectable adjustments to an image’s 
brightness and contrast; a dialog presents sliders for each value that can be adjusted 
independently. A live preview is available so that you can evaluate adjustments 
before committing to them. 


Sharpen—Affects the enhancement of image details by raising or lowering 
the contrast of pixels on a scale from 0 to 10. Like the Brightness And Contrast tool, 
Sharpen offers a real-time preview. 


You can undo most graphics operations by choosing Edit > Undo until the contain- 
ing document is closed or you quit Dreamweaver without saving. 
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Review questions 


1 What are the three factors that determine raster image quality? 
2 What file formats are specifically designed for use on the web? 


3 Describe at least two methods for inserting an image into a webpage using 
Dreamweaver. 


4 True or false: All graphics have to be optimized outside of Dreamweaver. 


5 What is the advantage of using a Photoshop Smart Object over copying and pasting an 
image from Photoshop? 
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Review answers 


1 Raster image quality is determined by resolution, image dimensions, and color depth. 
2 ‘The image formats that are compatible for the web are GIF, JPEG, PNG, and SVG. 


3 One method to insert an image into a webpage using Dreamweaver is to use the Insert 
panel. Another method is to use the Insert command in the Assets panel. Images can 
also be copied and pasted from Photoshop. 


4 False. Images can be optimized even after they are inserted into Dreamweaver by using 
the Property inspector. Optimization can include rescaling, changing format, or fine- 
tuning format settings. 


5 A Smart Object can be used multiple times in different places on a site, and each 
instance of the Smart Object can be assigned individual settings. All copies remain 
connected to the original image. If the original is updated, all the connected images are 
immediately updated as well. When you copy and paste all or part of a Photoshop file, 


however, you get a single image that can have only one set of values applied to it. 
f 
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WORKING WITH NAVIGATION 


Lesson overview 


In this lesson, you'll learn how to do the following: 


Create a text link to a page within the same site. 
Create a link to a page on another website. 
Create an email link. 

Create an image-based link. 


Create a link to a location within a page. 


This lesson will take about 3 hours to complete. To get the lesson files 
used in this lesson, download them from the webpage for this book at 
www.adobepress.com/DreamweaverC1B2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 


© Chrome File Edit View History Bookmarks People Window Help 
BB san Jose - Google Maps x Est 


C  & google.com/mapsiplace/Sans Jase, +CANSS7... © Q wk GD 


San Jose 
ae 


Bounty Park 


Sunny - 64°F 
12:24PM 
Emad unk 


pe Serre ep 


inlottavoritecssytone com 


Home T Cruises Events Contact Us About Us 


images/elaine jpol Properties 


Format Hi v Class Ccatext-12 
fe css 10 None ve) Unk 


width = 1.00 ~~. feruises. html 


Document Tile tert Title Here ~ Favorite City T 
height 125 favorite-temp.dwt 
«findex.html 
«. ftours. hum 


a 


lire a clainegtavorite 
target 


#carouselExampleControls 
BOOTSTRAP 


Clip to Shape ( 


D Make image Responsive 


Dreamweaver can create and edit many types of 
links—from text-based links to image-based links— 
and does so with ease and flexibility. 
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An HTML hyperlink 
consists of the anchor 
element <a>, one or 
more attributes, and 
link text or an image. 


Hyperlink basics 


The World Wide Web, and the internet in general, would be a far different place 
without the hyperlink. Without hyperlinks, HTML (HyperText Markup Language) 
would simply be ML (Markup Language). The /ypertext in the name refers to the 
functionality of the hyperlink. So what is a hyperlink? 


A hyperlink, or link, is an HTML-based reference to a resource available on the 
internet or within the computer hosting a web document. The resource can be any- 
thing that can be stored and displayed by a computer, such as a webpage, an image, 
a movie, a sound file, a PDF—in fact, almost any type of computer file. A hyperlink 
creates an interactive behavior specified by HTML and CSS, or by the program- 
ming language you're using, and is enabled by a browser or other application. 


HTML Value Closing 
element Uniform resource locator (URL) (new browser window) tag 


a as aad 


<a href="http://sitename.com/pagename. html" target="_blank">Link Text</a> 


oe = = 


Attribute Attribute Link text 


(hypertext reference) (visible to visitor) 


Internal and external hyperlinks 


The simplest hyperlink—an internal hyperlink—takes the user to another part of 
the same document or to another document stored in the same folder or hard drive 
on the web server that hosts the site. An external hyperlink is designed to take the 
user to a document or resource outside your hard drive, website, or web host. 


Internal and external hyperlinks may work differently, but they have one thing 

in common: they are enabled in HTML by the anchor element <a>. This element 
designates the address of the destination of the hyperlink and can then specify how 
it functions using several attributes. You'll learn how to create and modify the <a> 
element in the exercises that follow. 


Relative vs. absolute hyperlinks 


A hyperlink address can be written in two ways. When you refer to a target 
according to where it is stored in relation to the current document, it is known as 

a relative link. ‘This is like telling a friend that you live next door to the blue house. 
If she were driving down your street and saw the blue house, she would know 
where you live. But those directions don't really tell her how to get to your house or 
even to your neighborhood. A relative link frequently will consist of the resource 


name and perhaps the folder it is stored within, such as tours. html or content/ 
tours. html. 
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Sometimes you need to spell out precisely where a resource is located. In those 


instances, you need an absolute hyperlink. This is like telling someone you live 
at 123 Main Street in Meredien. This is typically how you refer to resources 
outside your website. An absolute link includes the entire uniform resource 


locator, or URL, of the target and may even include a filename—such as 
http://www.adobe.com/products/dreamweaver.html—or just a folder within 
the site. 


Both types of links have advantages and disadvantages. Relative hyperlinks are 


faster and easier to write, but they may not work if the document containing them 


is moved to a different folder or location in the website. Absolute links always work 


no matter where the containing document is saved, but they can fail if the targets 


are moved or renamed. A simple rule that most web designers follow is to use rela- 


tive links for resources within a site and absolute links for resources outside the 


site. Of course, whether you follow this rule or not, it’s important to test all links 


before deploying the page or site. 


Previewing the completed files 


To see the final version of the file you will work on in,this lesson, let’s preview the 


completed page in a browser. 


1 
2 


Launch Adobe Dreamweaver (2020 release) or later. 


If necessary, press F8 to open the Files panel. 
Select lesson10 from the site list. 


In the Files panel, expand the lesson10 folder. 


In the Files panel, navigate to lesson10/finished folder and right-click 
aboutus-finished.html. Choose Open In Browser from the context menu, 
and select your favorite browser. 


Files CC Libraries Insert CSS Designer 


ea } 3 lesson10 i 
Local Files 4 ee 
v 6 Site ~ lesson10 (NewRoad:MacProjects Get $50 
</> about-us.htmi 1 Che 
<P contact-us.htm! Put 
<I> cruises.html 
> css 
<P> events.html 
{} favorite-styles.css 
~ & finished i 2 
<> aboutus-finished.htm! | Site-Specific Code Hints... i 
</> contactus-finished.html , 
</> cruises-finished.html 
> css j | 
</> events-finished.html i Cloaking >| 
{}  favorite-styles.css ; Uni | 
> images ' Locate on Remote Server 


> 
<p> 


Open in Browser 


me Firefox Check Links > 
CG & 1% Google Chrome : 
DOM Asses Edit Browser List... Design Notes... 
“cecmmonrmmsononarcnnananonancacennernnnenerantmennnmead ON Geet oe 


© Note: Before 
beginning this exercise, 
download the project 
files and define a new 
site based on the 
lesson10 folder using 
the instructions in the 
“Getting Started” sec- 
tion at the beginning of 
the book. 
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The aboutus-finished.html file appears in your selected browser. This page 
features only internal links in the horizontal menu. 


5 Position the cursor over the horizontal navigation menu. 
Hover over each button and examine the behavior of the menu. 


@ Safari File Edit View History Bookmarks Develop Window Help @2O rz 55 
eee < 0 


G /OWCC2020/webs/OWCC2020/Lessons/lesson10/about-us htm! oO} a a i) 


About Favorite City Tour ~ Favorite City Tour 


rc) Bargain Deals 


R 


“Travel with a Difference” is not just our motto, it’s the way we do business. Here at Favorite City Tour we take travel seriously. Unlike other tour 
Open “file:///MacProjects/PeachpitjOWCC2020/webs/DWCC2020/Lessons/esson}0/cruises.htm!” in a new window behind the current window 4 tour guides and leaders 


The menu is the same one created and formatted in Lesson 6, “Creating a Page 
Layout,’ with a few changes. 


6 Click the Tours link. 


@ Safari File Edit View History Bookmarks Develop Window Help 


@2€@ <> @ 


file:///MacProjects/Peachpit/OWCC2020/webs/OWCC2020/Lé 


Our Favorite Tours ~ Favorite City Tour 


?) Get a Quote 7) Book a Tour 


r] Bargain Deals 


OUR FAVORITE TOURS 


Check out our latest favorite tours selection. You can't go wrong by choosing any one of then 


The browser loads the finished Tours page. 
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7 Position the cursor over the Contact Us link. 
Observe the browser to see whether it’s displaying the link’s destination any- 
where on the screen. 


Typically, the browser shows the link destination in the status bar. 


8 Click the Contact Us link. 


Although most of our staff works out of our headquarters here in Meredien, we have guides and travel leaders living in dozens of cities around the 
world. Do you live in your favorite city? We're always looking for great people! Drop us a note at |nfo@favoritecitytour.com. 


Eric Quist 
Eric is our tranena-*-"* 


~» Elaine Rendel Sarah Harvey 
Elaine is the President and Sarah arranges all our 
CEO of Favorite City Tour. She seminars and classes. Sarah 
- has 20-years experience in the mates t+ 
Bic} travel industry and worked ~* oo wuve around a 


town, awe Eric a call. 


Email Sarah at: Email Eric at: 
wo veravoriteCityTour.com sarah@FaveriteCityTour.com eric@FavoriteCityTour.com 


| TEES EEE 


Lainey Harris 
| Lainey manages our research 
and develonment department. 


Send email to ake er 
INE ENE Se Miinssestocseebaie 


Matthew Ridges 

@ Matthew is our do-it-all guy. 

=, He takes care of the business 
_end.of thinos..He.maintains......5 


Margaret Julian 

Maggie is our office manager. 
Although she's the youngest 
_memberofourstaffi.she.is.our 


The browser loads the finished Contact Us page, replacing the Tours page. The 
new page includes internal, external, and email links. 


9 Position the cursor over the Meredien link in the second paragraph of the main 
content area. Observe the status bar. 


@ Safari File Edit View History Bookmarks Develop Window Help S ¢ 


@e@ < om) file:///MacProjects/Peachpit/DWCC2020/webs/DWCC2020 "s 


wi) have guides and travel leaders living in dozens of citi¢ 
~Orop us a note at info@fayoritecitytour.com. 


Sarah Harvey | om Eric Quist 
Sarah arranges all our pe wa 


seminars an4 -" 


Although most of our staff works out of our headquarters her( in 


Elaine Rendel 

Elaine is the President and 

4 CEO of Favorite City Tour. She 
has 20-years experience in th~ 


town, give Eri 


Email Sarah at: Email Eric at: 


sarah@FavoriteCityTour.com eric@FavoriteC 


elaine@Favorit 


PR Lainey _. Matthew Ridges 
fi a Lainey mZnages our research Coal Matthew is our do-it-all guy. 


1 GSE AG and davelnnment denartmont mee BE Mo tavec \are of the business 
Open plane :/fg00. piimeps/bexnr Pep irr ry 7” in a new window behind the current window . 
oe 


Margaret J 
Maggie is our 
Although she' 
member of o1 


DIE GENTE GIO OAL meen me mmm — eso OS, He maintains. 


The status bar displays a Google Maps link. 


» Tip: Most browsers 
display the destination 
of a hyperlink in the 
status bar at the bottom 
of the browser window. 
In some browsers, 

this status bar may be 
turned off by default. 


® Note: The exact 
display in the status 
bar may differ between 
browsers. 
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@ Note: The display in 10 Click the Meredien link. 
Google Maps may differ 


ZS 
. @ Safari File Edit View History Bookmarks Develop Window Help @ORP 4 
from the one pictured. . ao 
@@@® <> @ G = 
San Jose - Google Maps ; & 
SO ae er eas a ea tori eee 
2 3 Livermore me UT sion | 
Pleasanton — Me om sae 
5 ; Dera 
f a 
iS sg = : oe S 
SE o ae ~ 
: Ss pal 


mapper 


San Jose a oe Diablo ar 
California Gee bs 
Me, “| ca 
@ vx: PA ee ge 
90 San Jose > Boe eres 
tas ‘ County 
Q (@ (<) i 
Sove Nearby ¢ oyour Share 
phone 
Henry W. Coe 


Boulder Creek 
Brookdale 
Ben Lomond 
* 


Quick facts 


cera ea 
A new browser window appears and loads Google Maps. The link is intended 
to show the visitor where the Meredien Favorite City Tour offices are located. If 
desired, you can even include address details or the company name in this link 
so that Google can load the exact map and directions. 


Note that the browser opens a separate window or document tab when you 
click the link. This is a good behavior to use when directing visitors to resources 
outside your site. Since the link opens in a separate window, your own site is 
still open and ready to use. This practice is especially helpful if your visitors 

are unfamiliar with your site and may not know how to get back to it once they 
click away. 


11 Close the Google Maps window. 


The Contact Us page is still open in the browser. Note that each employee has a 
link applied to their email address. 


12 Click an email link for one of the employees. 


® Note: Many web visitors don’t use email programs installed on their computers. They use 
web-based services such as AOL, Gmail, Hotmail, and so on. For these visitors, email links like 
the one you tested won't work. The best option is to create a web-hosted form on your site that 
sends the email to you via your own server. 
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< ae: file:///MacProjects/Peachpit/DWCC2020/webs/DWCC2020/Le« 


Untitled 2 ee 2 arour 


Elaine Rendel 
Elaine is the President and 
CEO of Favorite City Tour. S! 
has 20-years experience in 
travel industry and worked a 
several travel agencies in th 
past developing tours and 
cruise packages for both 
individuals and large 
corporations. 


She's not afraid of diving irfoz 
problem. You may find tf 


answering your phon fcall or adyt 
checking out a pr/fiem you 7e are 
have with a resf#vation. ical. 


Email Elaine 


Matthew Ridges 
Matthew is our do-it-all guy. 
He takes care of fhe business 
end _of thinos. He maintains. 


Lainey Harris 
Lainey manages our research 
and dayvelanment department. 


Send Bihall to | ine@FavoritecityTour.com 
ee bone (eacaudica DOW. TOUF. 


Margaret Julian 
Maggie is our office r 
Although she's the yc 
member of our staffs 


The default mail application launches on your computer. If you have not set up 
this application to send and receive mail, the program will usually start a wizard 
to help you set up this functionality. If the email program is set up, a new mes- 
sage window appears with the email address of the employee automatically 
entered in the To field. 


13 Close the new message window, if necessary, and exit the email program. 
14 Scroll down to the page footer. 
Note that the navigation menu sticks to the top of the page as you scroll down. 


15 Click the Events link. 


@ Safari File Edit View History Bookmarks Develop Window Help GS © % FA ow 584 


file:///MacProjects/Peachpit/DWCC2020/webs/DWCC2020/Le 


Fun Festivals and Seminars - Favorite City Tour 


Seminar Description Length 


Get a drink, get a meal and get a room. Learn the basics of getting 
French for travelers along in France. Learning some basic phrases can melt a lot of 2 weeks M $60 
barriers. 


Learn how to make money doing the thing you love most: Traveling. 
Magazines, newspapers and websites all need good travel stories. 
aay 4 weeks 
Travel wetting 104 Learn how to find unique stories, create a slant, and how to market 


them, Taught by a professional travel writer, 


Are your travel pix flat, drab and ugly? Take your photos up to the 
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The browser loads the Festivals and Seminars page. The browser focuses on the 
table containing the list of upcoming events near the top of the page. Notice 
that the horizontal menu is still visible at the top of the browser. 


16 Click the Seminars link in the first paragraph. 


@ Safari File Edit View History Bookmarks Develop Window Help 


Wart-——. »w_ the world parties? Want to learn a new language? There's no time like the present. Check out our list of international festivals and 
if(cal senuinars. ) \e schedule is updated on a regular basis, so you may want to bookmark this page and check it often. Hope to see you soon! 


ann wenn 
wnaing Mai & Bangkok - Thailand 
cee pene NIGMS i. si St Petersburg = Russia ee 
wiay 12-23, 2020 Cannes Film Festival iE eee ee Cannes ~ France 


Pilton, Somerset ~ UK 


Haro - Spain 


Glastonbury Music Festival 


The browser jumps down to the list of upcoming seminars at the bottom of 


age in a new window bel 


<nunenmnrneonmeh ONINGION. Park...Leicastershite — UK 


the page. 
17 Click the Return to Top link that appears above the seminar schedule. 


You may need to scroll up or down the page to see it. The browser jumps back 
to the top of the page. 


18 Close the browser and switch to Dreamweaver, if necessary. 


You have tested a variety of different types of hyperlinks: internal, external, relative, 
and absolute. In the following exercises, you will learn how to build each type. 


Creating internal hyperlinks 


Creating hyperlinks of all types is easy with Dreamweaver. In this exercise, you'll 
create relative text-based links to pages in the same site, using a variety of methods. 
You can create links in Design view, Live view, and Code view. 


Creating relative links 


Dreamweaver provides several methods for creating and editing links. Links can be 
created in all three program views. 


1 Open about-us.html from the site root folder in Live view. 
Make sure the document window is at least 1200 pixels wide. 


2 In the horizontal menu, position the cursor over any of the menu items. 
Observe the type of cursor that appears. 
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7 Inthe Link field, click the Browse For File icon & 


‘ 
piticcrants! ea 


The pointer icon Wy indicates that the menu item is structured as a hyperlink. 
The links in the horizontal menu are not editable in the normal way, but this is 
something you can actually see only in Design view. 


Switch to Design view. 


Favorite City Tour 


Position the cursor over any item in the horizontal menu again. 


The “no” symbol © appears, indicating that this section of the page is unedit- 
able. The horizontal menu was not added to any of the editable regions you 
created in Lesson 7, “Working with Templates.’ That means it’s considered part 
of the template and is locked within Dreamweaver. To add hyperlinks to this 
menu, you'll have to open the template. 


DOM Assets Snippets 


it 


Templates 


© Note: The Template category is not visible in Live view. You will see it 
only in Design view and Code view or when no document is Open. 


Favorite City Tour 
Choose Window > Assets. Click the Templates icon [6s) in 
the Assets panel. Right-click favorite-temp and choose Edit 
from the context menu. 


BER mMOeBHn 


Switch to Design view, if necessary. 
Name T 


In the horizontal menu, insert the cursor into the Tours link. OME E ee 
<p> ~ favorite-temp 


The horizontal menu is editable in the template. Rename 


(Apply >) Delete y th 


oeernen een nannnnnTDnDDSOet ner enatntTIDEEEnEnEeTery I Indate Currant Dano sna nt 


If necessary, choose Window > Properties. 
Examine the contents of the Link field in the Property inspector. 


) Tip: When editing 
or removing an existing 
hyperlink, you don’t 
need to select the entire 
link; you can just insert 
the cursor anywhere in 


aw #navbarSupportedContent ee ree a ul -navbar-nay. Wage fi nav-item 2] the link text. Dream- 
Properties hi weaver assumes you 
Format None vy Class (nav-link YB] Hi = Tite want to change the 
ID OS Target a 


None Link # I 


entire link by default. 


To create links, the HTML tab must be selected in the Property inspector. The 
Link field shows a hyperlink placeholder (#). 


A file selection dialog appears. 
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8 Navigate to the site root folder, if necessary. 
Select tours.html from the site root folder. 


ee ae zm : a a ta : : 2 a = scat 
Name v Date Modified Size Kind 
121 cumen' 


B) tours.htmi 10/21/49,14:10 AM 
» 19) Templates ¢ 

» =) resources 
> imis 
> 
a 


sredContent.collapse-navbar-collapse yd mavbar-nav.mreaute fh snaveitem eae 


Title - 
™ images 


finished 
<a 


nriacitn etiam ann 


ite City Tour 


Options Cancel Eas 


@ Note: The link 9 Click OK/Open. 
won't have the typical 

hyperlink appearance— 
a blue underscore— You've created your first text-based hyperlink. 
because of special 
formatting applied 
by the Bootstrap style notation (../) to the filename. This notation tells the browser or operating 
sheet. 


The link ../tours.html appears in the Link field in the Property inspector. 


Since the template is saved in a subfolder, Dreamweaver adds the path element 


system to look in the parent directory of the current folder. 


This notation is necessary if the child page is saved in a subfolder, but it is 
unnecessary if the page is saved in the root of the site. Luckily, when you create 
a page from the template, Dreamweaver rewrites the link, adding or removing 
path information as needed. 


If desired, Dreamweaver enables you to type links in the field manually. 
10 Insert the cursor in the Home link. 


The home page does not exist yet. But that doesn’t stop you from entering the 
link text by hand. 


11 In the Property inspector Link field, select the hash (#) symbol, type 
.-/index.html to replace the placeholder, and press Enter/Return. 


ow ecaruel div #navbarSupportedContent.collapse.navbar~collapse ul -navbar-nay.n 


Sag += eae 


= 
D None ba Link ../index.html ¥ OS 


~ we : = SNS ee eee em SARE RS SURE SSS 


Document Title Insert Title Here - Favorite City Tour ( Page Properties... ) ( 


At any time, you may insert a link by typing it manually just this way. But enter- 
ing links by hand can introduce a variety of errors that can break the very link 
you are trying to create. If you want to link to a file that already exists, Dream- 
weaver offers other interactive ways to create links. 
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12 Insert the cursor in the Cruises link. 
13 Click the Files tab to bring the panel to the top, or choose Window > Files. 


You need to make sure you can see the Property inspector and the target file in 
the Files panel. 


14 In the Property inspector, drag the Point To File icon €)—next to the Link 
field—to cruises.html in the site root folder displayed in the Files panel. 


» 


Files CC Ubrarias Inset CSS Designer ey 

1$.055 jquery-3.3.1.minjs popper,min.js bootstrap-4.3.1js ¥ ia © E53 tesson09 ©) COetine Servers) | 
52) 

Local Files T : 

~ Site - fessono9 (NewRoadiMacProjects:Peachpit; DWCC2020.we... | 

<> tours.html 


.sS Tempiates | 

<)> favorite-temp.dwt j 
resources | 
js i 
© images 
finished | 
{} favorite-styles.css 


vvvy 


</> events.himl 
> css 


tok wnav-item a -nav-link @ 813x237 ~ fay RESO ees 
ponent ens : </> ™ contact-us.htmt 

= 

oe <P> about-us.htmi 


cass avink ~) B J GRE bs Te — 
Link _/eruises.html Sen eee v J 


ite City Tour C Page Properties...) iG List tem S) Ce ve 1 local items selected totalling 9921 bytes. 
| 


Dreamweaver enters the filename and any necessary path information into the 
Link field. 


15 Create the rest of the links as shown below using any of the methods you've 
learned: 


Events: ../events.html 
Contact Us: ../contact-us.html 
About Us: ../about-us.html 


For files that have not been created, you will always have to enter the link manually. 
Remember that all the links added to the template pointing to files in the site root 
folder must include the . ./ notation so that the link resolves properly. Remember 
also that Dreamweaver will modify the link as needed once the template is applied 


to the child page. 


Creating a home link 


Most websites display a logo or company name, and this site is no different. The 
Favorite City Tour logo appears in the header element—a product of a background 
graphic and some text. Frequently, such logos are used to create a link back to the 
site home page. In fact, this practice has become a virtual standard on the web. 
Since the template is still open, it’s easy to add such a link to the Favorite City 
Tour logo. 


~ Tip: Ifa folder inthe 
Files panel contains a 
page you want to link 
to but the folder is not 
open, drag the Point To 
File icon over the folder 
and hold it in place to 
expand that folder so 
that you can point to 
the desired file. 
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@ Note: You can select 
any range of text to 
create a link—from one 
character to an entire 
paragraph or more; 
Dreamweaver will add 
the necessary markup 
to the selection. 


»» Tip: You may need 
to select the All button 
first to see favorite- 
styles.css. 


Tip: If you select an 
existing rule first, the 
new rule will be added 
directly after the selec- 
tion. This is a good way 
to organize the rules in 
your style sheets. 


ody header row diy .co}-xl-12 


Insert the cursor in the Favorite City Tour text in the <header> element. 


Dreamweaver keeps track of links you create in each editing session until you 
close the program. You can access these previously created links from the 


Property inspector. 


Click the h2 tag selector. In the Property inspector Link field, choose 
../index.html from the dropdown menu. 


Q@ 813x237 ~ [ep 


Properties 


Format Heading 2 v Class ( coi-xl-12 MILB) je sm oe ce ee Title 
v 


tH 


r 
1D None S Link —— : os arget ze 
ee) feruises numal Se sees eee 
Document Title Insert Title Here - Favorite City T HES... f 


favorite-temp.dwt 
../index. html 
../tours.html 
# 


#carouselExampleControls 


This selection will create a link to the home page that you will build later. The 
<a> tag now appears in the tag selector interface. 


You probably noticed that the logo has changed color to blue. If you have used 
the internet for a while, you probably have seen lots of links formatted in this 
color. In fact, it’s part of the default styling of hyperlinks. 


In Lesson 4, “CSS Basics,’ you learned that some HTML tags are styled by 
default. The <a> tag is one of those that comes with a full set of specifications 
and behaviors. To get a better understanding of what’s involved, check out the 
sidebar “Hyperlink pseudo-classes.” 


Although some people may want normal hyperlinks to be styled this way, the 
logo is not supposed to be blue. It’s a simple fix with CSS. 


In the CSS Designer, select favorite-styles.css. 
In the Selectors pane, select the rule header h2. 
Create the following selector: 

header h2 a:link, header h2 a:visited 


This selector will target the “default” and “visited” states of the link within 
the logo. 
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i a ge ; % + 2 
C4 . 2 = x i » ® 
Hyperlink pseudo-classes tae 
ye? 
Default styling of HTML elements can sometimes get pretty elaborate. For example, _ c 
the <a> element (hyperlink) provides five states, or distinct behaviors, that can be 
modified individually by CSS using what are known as pseudo-classes. A pseudo- 
class is a CSS feature that can add styling, special effects, and functionality to certain 
selectors. Here are the pseudo-classes for the <a> tag. 
© a: link—creates the default display and behavior of the hyperlink and in many 
cases is interchangeable with the a selector in CSS rules. But a: Link is more 
specific and will override specifications assigned to a less specific selector if both 
are used in the style sheet. 
° a:visited—formats the link after it has been visited by the browser. This state 
can be reset to the default styling by deleting the browser cache, or history. 
° a:hover—formats the link when the cursor passes over it. 
° a:active—formats the link when the mouse clicks it. 
°¢ a:focus—formats the link when accessed via keyboard as opposed to mouse 
interaction. 
When used, the pseudo-classes must be declared in your style sheet in the order 
listed here to be effective. Remember that, whether declared in the style sheet or 
not, each state has a set of default formats and behaviors. 
4 Add the following properties to the rule: 
color: inherit 
text-decoration: none 
Files CC Libraries insert CSS Designer Bas 
$.1.min.js popper.min.js bootstrap~-4.3.1.js 5 fe All Current 
+ — Sources + — Properties 
ALL SOURCES Show Set 
bootstrap-4.3.1.cs5 ( Read Only ) i 
favorite-styles.css E] More 
color : inherit 
iy @Media : GLOBAL text-decoration ; | nonel , - 
GLOBAL ak noe 
| | + — Selectors : 
me P Filter CSS Rules 
«Navbar-nav .nav-item 
header h2 
header h2 a:link, header h2 a:visited 
Q 775x237 ~ fay Base) 
poseorears reece header 
kote ~~ nay .container 
YB/JzZ:s2 Title son 
“i - Ole Target ay ae 
Page Properties., ») All Mode: Lists rules for entire document 
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5 Switch to Live view. 


@ Note: Design view These properties will cancel the hyperlink styling and return the text to its origi- 
will not render all the nal appearance. By using inherit for the color value, the color applied by the 
eae peau ae s header h2 rule will be passed automatically to the text. That way, if the color 

in Lee meee in the header h2 rule changes, the hyperlink will be styled in turn without any 
browser. additional work or redundant code. 


There’s one more link to create and style before we save the template. In the 
horizontal menu, the company name appears on the left side of the buttons. The 
text was part of the original Bootstrap starter layout that you customized with 
the company name. 


If you review the mockup design from Lesson 5, the header element and its 
contents are hidden on tablets and smartphones. The company name appear- 
ing next to the horizontal menu is supposed to replace the company logo on 
those smaller screens. Visitors using tablets and smartphones should be able to 
tap this text to take them to the home page when the header element is hidden. 
Let’s add the home page link to this text. 


6 Switch to Design view. 
7 Select the text Favorite City Tour at the top of the menu. 


The link placeholder (#) should appear in the Link field of the Property 
inspector. 


8 In the Property inspector Link field, choose . . /index. html from the drop- 
down menu. 


The link is complete, but you're not finished with it yet. Although the text is 
intended for tablets and smartphones, there’s no need for it to be visible on 


desktop computers. Let’s create some styling that will hide the text on desktop 
computers. 


9 Ifnecessary, select the a.navbar-brand tag selector. 
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10 In the CSS Designer, select favorite-styles.css. 
Click the Add Selector icon *. 
Press the up arrow to create the following selector: 
-container .navbar-brand 


* favorite-temp.dwt” x favoriectempawe 
Pd 
© bootstrap-4.3.1.cs5 — favorite-styles.css* — Jquery-3.3.i.minjs popper.minjs Source Code > hootstrap-4.3.1.css — favorite-styles.css*  fquery-3.3.L.minjs  popper.mings & 


 fabout-us. him! 
Jevents. html 


td. } 


Hedy > Shae 2 navbar navbar-expand-ly.nivbaredarkibg-datk | dhe container > navtar-brand 


../ cruises. htm! 


Properties ja 
Ce Format None = Format None SM Sea 25 22 
eS 3) gona s 1 None ~ KY findexhtonl ce 
Document Title Insert Title Here - Favorite City Tour Document Title Insert Tite Here ~ Favorite city v/tours.heml s 3 
i Hes 
11 Add the following property to the new rule: 
7 ° 
display: none 
» » 
Files CC Libraries imsert CSS Designer Files CC Libraries insert CSS Designer B 
All Current All Current 
+ — Sources + Properties f- Sources | + = Properties | 
ALL SOURCES Show Set ALL SGURCES Show Set 
Dootstrap-4.3.1.css ( Read Only } a bootstrap-4.3.1.css { Read Only ) 
= rere TS AUN RIE eS More a CRN ERS Me 
+ @Media : GLOBAL @Media ; GLOBAL 
GLOBAL GLOBAL 


+ — Selectors © 
P Fitter 
bg-dark 
snavbar-dark .navbar-nav nay-link 
snavbar-nav .nav-item 
header b2 
[-container navbar-brand 


header p r 


sbg-dark 

snavbar-dark .navbar-nav .nav-link 
navoarnav .qav-itern 

heeder h2 

header h2 ailink, header h2 a:visited 


header 
Ali Mode: Lists rules for entire docurnent All Mode; Lists rules for entire document 


12 Switch to Live view. 
The company name is no longer visible beside the horizontal menu. But 
now the menu has moved over to the left side of the layout. It would 
look better centered on the page. The menu is created using the element 


ul.navbar-nav.mr-autolist. 


13 In the CSS Designer, select favorite-styles.css. 
In the Selectors pane, select the rule .bg-dark. 
Create the following selector: 
ul.navbar-nav 
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14 Add the following property to the new rule: 
margin: 0 auto 


* favorite-remp.dwt Files CC Libraries Insert CSS Designer : 
‘Sie bootstrap-4.3.1.css favorite-styles,css* jauery-3.3, Lmin fs popper.minjs boatstrap-4 a Current 
+ = Sources BS peti 
PS isto es 3 Show Set 
re bentetrap-4.3.4.08S ( Raw Onty } : £3 More 
fayorite-styles.css 


+ @Medis : GLOBAL 
GLOBAL 


+ — Selectors 

Fe) 

sbg-dark 
“ ubnavbarnay i 
pavbor dark neta nov taeEOk 


Devtar-nay nase 


The horizontal menu aligns to the center of the layout. 


So far, all the links you’ve created and the changes you've made are only on the 
template. The whole purpose of using the template is to make it easy to update 
pages in your site. 


Updating links in child pages 


To apply the links you've created to all the existing pages based on this template, all 
you have to do is save it. 


1 Choose File > Save. 


The Update Template Files dialog appears. You can choose to update pages now 
or wait until later. You can even update the template files manually, if desired. 


2 Click Update. 


* favorite tompdwt # faworite-temp.dwt 


“Source Code > bootstrap-4.3.1.css favorite~styles.css” jquery~3.3.1.minJjs pop} Update Pages 
Look In { Files That Use... v] favarite-temp, about-us, .. 


Update: () Library items 


Update all fites based on this template? 
about-us.htmt 
contact-us. html 
cruises. htm! 
events.html 


Update Template Files 


Tenyolates 


Show log Done 


Updating NewRoad:MacProjects:Peachpit; OWCC2020:webs OWCC2020:Lessons:lesson10> 
updated about-us.html 
updated contact-us.html 
updated cruises.html 
updated events.htm! 
updated tours.html S 
Done. is 
files examined: 5 
files updated: 5 
files which could not be updated: 0 
total time: (0:00:00) 


tours.htrnt 


nav navbar.navbar-expand-lg.navoar-dark 


f Gly container > nayba: 


Properties 


Format None v Class Chavbar. brand ¥) B T 


Ba C55 1D None vi Unk © findex.html “RTRs: 
Dreamweaver updates all pages created by this template. The Update Pages 


dialog appears and displays a report listing the updated pages. If you don’t see 
the list of updated pages, click the Show Log option in the dialog. 
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3 Close the Update Pages dialog. ® Note: When you 
Close favorite-temp.dwt. close templates or 


Dreamweaver prompts 


4 Click Save. 


* about-us.html* 


Source Code bootstrap-4.3.1.css 


webpages, Dream- 
weaver may ask you 
to save changes to 
favorite-styles.css. 


ys Save changes to favorite-styles.css? 


C Don't Save ) {Cancel » [Swe 


and properties. 


you to save favorite-styles.css. 


favorite-styles.css jquery-3.3.1.min.js popper.min.js bootstrap~4.3.1 


The file about-us.html is still open. Note the asterisk in the document tab; this 
indicates that the page has been changed but not saved. 


5 Save about-us.html. 


Although Live view provides an excellent method to preview your HTML con- 
tent and styling, the best way to preview links by far is in a web browser. Dream- 


weaver provides an easy way to preview webpages in your favorite browser. 


6 Right-click the document tab for about-us.html. 
Select Open In Browser. 


Xx about-us.htr™® 
Show Source Code 


Source Code 


New... 

Open... 

Close 

Close All 

Close Other Files 


Save 
Save As... 
Save All 
Revert 

C3 th Ri 
Open in Browser 


re 


Choose your preferred 


Move to New Window 


css jquery-3.3.1.min.js popper.min.js bootstrap~4.3.1js 


~ ABOUT FAVORITE CITY TOUR 


ers. 


browser from the context menu. 
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Whenever you see these 
warnings, always save 
the changes; otherwise, 
you could lose all your 
newly created CSS rules 
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7 Position the cursor over the Contact Us link. 


file:///MacProjects/Amazing%20Ribs/Documentation/tableofcontents, html# 


@@@ <> ica) = files///MacProjects/Peachpit/OWCC2020/webs/DW( C, 5 GC 


ZH Chart Locator URL redirect..Amazing Ribs edit Structure | Amazing Ribs USA Made Hats & Caps Other Entree..Amazing Ribs Best Cheap Lun...s - Thriftist »> 


About Favorite City Tour - Favorite City Tour 


4T FAVORITE CITY TOUR 


Ai 


ae = Rear 8 
pen | ‘file/OWCC2020/wel 


If you display the status bar in your browser, you can see the links applied to 
each item. When the template was saved, it updated the locked regions of the 
page, adding the hyperlinks to the horizontal menu. Child pages that are closed 
at the time of updating are automatically saved. Open pages must be saved 
manually or you will lose changes applied by the template. 


Tip: Thoroughly test 8 Click the Contact Us link. 
every link you create on 


every page. 


The Contact Us page loads to replace the About Us page in the browser. 
9 Click the About Us link. 


The About Us page loads to replace the Contact Us page. The links were added 
even to pages that weren't open at the time. 


10 Close the browser. 
11 In Dreamweaver, close about-us.html. 


You learned three methods for creating internal hyperlinks with the Property 
inspector: typing the link manually, using the Browse For File function, and using 
the Point To File tool. Next you will learn to create external links. 


Creating an external link 


The pages you linked to in the previous exercise were stored within the current site. 


You can also link to any page—or other resource—stored on the web if you know 
the URL. 
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Creating an absolute link in Live view 


In the previous exercise, you used Design view to build all your links. As you build 
pages and format content, you'll use Live view frequently to preview the styling and 
appearance of your elements. Although some aspects of content creation and edit- 
ing are limited in Live view, you can still create and edit hyperlinks. In this exercise, 
you'll apply an external link to some text using Live view. 


1 Open contact-us.html from the site root folder in Live view. 
Make sure the document window is at least 1200 pixels wide. 


The first thing we need to do is add some text to the file. 
2 Inthe Files panel, open contact-link.txt from the lesson10/resources. 
3 Select all the text and copy it. 


4 Switch to contact-us.html. Insert the cursor into the paragraph starting 
A company is only as good as its people. 


5 Select the p tag selector. 


6 Choose Insert > HTML > Paragraph. 


* contact-us.html*® 


Source Code bootstrap-4.3.1.css fav > spper.ofin.js baotstrap-4.3.1js 


Ordered List 
List item 
Hyperlink 


Header 
Navigation 
Main 


A ; | d leader 
company is only as goo Navigation 


the best and then we train i —iC 44, 


s Sree a P Aside 
iy ee Elaine Re; Bootstrap Components 2 Article 
| aN laine jo «meee eaoinomee » Section 


The Position Assist dialog appears. 
7 Click After. 


* contact-us.html* 


Source Code 


* contact-us.html* 


favorite-styles.css bootstrap-4.3.1.css favorite-styles.css jquery-3.3.14 


jquery-3,3.1 


bootstrap-4.3.1.css 


san 35 


“A COMpany IS Only aS gOOa as Its peopie and we 


Ld 


Before 


This is the content for Layout P Tag 


(| | Lyte ee Flaine Rendel } 


A new paragraph element appears with placeholder text. 
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* contact-us.html* 


Source Code 


bootstrap-4.3.1.css 


8 Select the placeholder text and paste the text copied in step 3. 


* contact~us.html® 


favorite~styles.css jquery-3.3.1.4 “Source Code. bootstrap-4.3.1.css favorite~styles.css jquery-3.3.1. 


Tip: For this exercise, 


you can use any search 
engine or web-based 
mapping application. 


® Note: In some 
browsers, you can 

type the search phrase 
directly in the URL field. 


© Note: We're using 
Adobe headquarters 

in place of the fictional 
city of Meredien. Feel 
free to use your own 
location or another 
search term in its place. 


Er ry 150 300 i) 00 350 Ae 


‘Although most of our staff works out of our heada 
world. Do you live in your favorite city? We're alwe 


Elaine i is 5 the President and 


REO af Eavarita City Tar Cha 


The text is in place for two of our sample links. 


9 Inthe new <p> element, note the word Meredien. 


You'll link this text to the Google Maps site. 


10 Launch your favorite browser. 
In the URL field, type google.com/maps and press Enter/Return. 


@ Chrome file Edit View History Bookmarks People Window Help 


666 we Google Maps x + 
€ C@  @ google.com/maps/ ©®aQarx onFr®eoex : 
RISA Wann ARTIS aaa oe gances ‘ 
ee ens EASE NI od ate: 
: 2 Se See 
=! SN 
Park | i | Oe 4 
Y See travel times, traffic and nearby places A ’ ra N PARR 
@® a 


CARS ea i SE GREE =e Siobbps ANG LAN 


Google Maps appears in the browser window. 
11 Type San Jose, CA into the search field and press Enter/Return. 


@ Chrome File Edit View History Bookmarks People Window Help 


@086 B® San Jose - Google Maps x + 


spate ON FO 


S Cc 


@ google.com/maps/piace/San+Jose,+CA/@3’7.... 


eee 
Sos 
see 


@ 
Edwards AG 
n Fi fancisco 


> Few: 
& 
aS ¥ as ar GS 
‘ h280 ~ Oo: AE Tite 
SAG ert i Ge . 4 
San Jose i ce 
California 
Sunny : 64°F 
12:24 PM . 
% © | 
©0666 we 
Morgan' 
Directions Save Nearby Send to a ee 
your phone San Martin >”. 
I iGocale i 
Photos Map data ©2019 United States Terms : 
ea Send feedback _ hs ‘2 es 
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San Jose appears on a map in the browser. In Google Maps, somewhere on the 
screen you should see a settings or share icon. 


12 Open the sharing or settings interface as appropriate for your chosen mapping 
application. 


Share 


Send a link Embed a map 


San Jose 
California 


Link to share 


COPY LINK 


Sy) 


Link copied to clipboard, 


Facebook Twitter 


Send feedback 


j 


@ Note: The technique for sharing map links is implemented differently in various browsers 
and search engines and may change over time. 


Search engines and browsers may display their link-sharing and embedding 
interface slightly differently than the one pictured. Google Maps, MapQuest, 
and Bing usually offer at least two separate code snippets: one for use within 
a hyperlink and the other to generate an actual map that you can embed in 
your site. 


Note that the link contains the entire URL of the map, making it an absolute 
link. The advantage of using absolute links is that you can copy and paste them 
on any page in the site without worrying about whether the link will resolve 
properly. 

13 Copy the link. 


14 Switch to Live view in Dreamweaver. > Tip: Double-click to 
Select the word Meredien in the second paragraph. select text in Live view. 


In Live view, you can select an entire element or insert the cursor within the 
element to edit or add text or apply hyperlinks, as desired. When an element or 
section of text is selected, the Text Display will appear. The Text Display inter- 
face allows you to apply <strong> or <em> tags to the selection or (as in this 
case) to apply hyperlinks. 
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15 Click the Hyperlink icon %2 in the Text Display. Press Ctrl+V/Cmd+V to paste 
the link in the Link field. Press Enter/Return to complete the link. 


feat people! we [00K iong ana Nara (Oo | 
every day 


jréat DEopie: we 100K jong ana nz 
every day 


rs here in Meredian, we have guides ar 
oking ior great peopleX Drop us a note 


fii  SarahHarvey ; S Sarah Harvey _ bi 
Sarah avenGesal our : , Sarah arranges all our f ' aah arranges Pale our 


The selected text displays the default formatting for a hyperlink. 


16 Save the file and preview it in the default browser. 
Test the link. 


When you click the link, the browser takes you to the opening page of Google 
Maps, assuming you have a connection to the internet. But there is a problem: 
clicking the link replaced the Contact Us page in the browser; it didn’t open 

a new window, as it did when you previewed the page at the beginning of the 
lesson. To make the browser open a new window, you need to add an HTML 
attribute to the link. 


17 Switch to Dreamweaver. 
Click the Meredien link in Live view. 


The Element Display appears focused on the <a> element. The Property inspec- 
tor displays the value of the existing link. 


18 Choose _blank from the Target menu in the Property inspector. 


ISHS CYSTy Uay. 


g 
uarters here in|Meredien} we have guides 


ys looking for great people! Drop us a no 
Default 


| a Sarah Harve blank y 


new 


BSNS CVEly Uuay. 


a 
uarters here in| Meredien] we have guides 


ys looking for great people! Drop us a not 


ISHS SYSLy Uy, 


quarters here Poise we have guides 


tays looking for great people! Drop us a not 


| SR, Sarah Harvey 


nermte4 


_parent 


_self 


~ a APOE : 
<4) ‘2 12 +2 + Title = iz ss a2 Title? top >) TE 12 s3 = Title 
Targe sacs 
».gl/maps/bexn... ¥ ES ar get maps/bexnrm,.. v €3 3 Target I/maps/bexnrm... » © Target {piank 2, 


Note the other options in the dropdown menu. 
19 Save the file and preview the page in the default browser again. Test the link. 


This time when you click the link, the browser opens a new window or docu- 
ment tab. 


20 Close the browser windows and switch back to Dreamweaver. 


As you can see, Dreamweaver makes it easy to create links to both internal and 
external resources. 
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sas & 


Where are you going? 


sem @es 
eee €ees 


The target attribute specifies where to open the designated page or resource. 
The Target menu in the Property inspector has six options. 


Default—This option does not create a target attribute in the markup. The default 
behavior of hyperlinks is to replace the page or resource in the current window 
or tab. 


_blLank—Loads the page or resource in a new window or tab. 
new—HTMLS value that loads the page or resource in a new window or tab. 


_parent—Loads the linked document in the parent frame or parent window of the 
frame that contains the link. If the frame containing the link is not nested, then the 
linked document loads in the full browser window. 


_self—tLoads the linked document in the same frame or window as the link. This 
target is the default, so you usually don’t have to specify it. 


_top—Loads the linked document in the full browser window, thereby removing 
all frames. 


Many of the target options were designed decades ago for sites using framesets, 
which are now outdated. As a result, the only option you need to consider today is 
whether the new page or resource replaces the existing window content or loads in 
a new window. 


Setting up email links 


Another type of link takes the visitor not to another page but to the visitor’s email 
program. Email links can create automatic, pre-addressed email messages from 
your visitors for customer feedback, product orders, or other important communi- 
cations. The code for an email link is slightly different from the normal hyperlink, 
and—as you probably guessed already—Dreamweaver can create the proper code 


for you automatically. 
1 Ifnecessary, open contact-us.html in Design view. 


2 Select the email address (info@favoritecitytour.com) in the second paragraph 
underneath the heading CONTACT FAVORITE CITY TOUR. 


) Tip: The Email Link menu cannot be accessed in Live view. But you can use the menu in 
Design view or Code view, or you can just create the links by hand in any view. 
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Tip: If you select the 
text before you access 
the dialog, Dream- 
weaver enters the text 
in the field for you 
automatically. 


3 Choose Insert > HTML > Email Link. 


ce FE 
Email Link 


Text: info@favoritecitytour.com 


Email:  info@favoritecitytour.com 4 
pat people! ' fference. We f 


here in Meredien, we have guides and travel leaders living in dozens of cities aro) 


at people! Drop us a note at [Cie Weld reliaiceltia 


The Email Link dialog appears. The text selected in the document window in 
step 2 is automatically entered into the Text and Email fields. 


4 Click OK. 
Examine the Link field in the Property inspector. 


t of our headquarters here in Meredien, we have guides and travel leaders livi 


always looking for great people! Drop us a note at info@tavoritecitytour.com 


div .container.mt-4 p 


Title 
Target 


Favorite City Tour 


Dreamweaver inserts the email address into the Link field and also enters an 
additional notation—mai1lto:—that tells the browser to automatically launch 
the visitor’s default email program. 


5 Save the file and open it in the default browser. 
Test the email link. 


@ Safari File Edit View History Bookmarks Develop Window Help QD Ps ww 100 
pee etl at cae tt ESL Bie tb CSREES SEE ee AES UA 


lox Ta Sas = 
sn} @ /DWCC2020/webs/DWCC2020/Lessons/lesson10/contact-us. html © 
Untitled 2 : 


»> 
Ey 
7 
Send Attach 
Frown Cimpenen s hard to find people that will make a difference. We hire only the 
To: — Info@favoritecitytour.com a 
Ce: a guides and ——==SSuere nvmg ens of cities around the 
Siblect sanot(at info@favoryecitytour.com. 
= tric Quist 
Hour Eric is our transportation 
$ses, Sarah expert. He can review your 
rings start on needs and resources to 
eir goals, so identify the best solutions for 
ory minute, daily transport to or in any city, 
whether it includes cars, bikes, 
ite custom . 
: ; buses or trains. He is an expert 
‘with special . Q i 
: in alternative energy and will 
wdicap 
=n F make sure your carbon 
ae earn Raat access or special dietary footprint is as small 
° mM. 10 InNfo@fay: i . " r, m: 
pe SR NONDIOR TY OUIRCILYTOURCOM aid of diving into a ; __ needs, or make = 


pee E LOA incre srptconiormsalascummnnnnicccicnene 
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If your computer has a default email program installed, it will launch and cre- 
ate a new email message using the email address provided in the link. If there 

is no default email program, your computer’s operating system may ask you to 
identify or install one. 


Close any open email program, related dialogs, or wizards. 
Switch to Dreamweaver. 


You can also create email links manually. 
Select and copy the email address for Elaine. 


Type mailto: in the Property inspector Link field. Paste Elaine’s email address 
directly after the colon. Press Enter/Return to complete the link. 


(Surimorciaceteaclaine@FavoriteCityTour.com 


oT 


ptinstance fieinstance 


body 


jerties 


css 


Format Paragraph SS 


Class (media-body _ 


Link {m. =e 


Format Paragraph 
10 


None Ie None UPk fio 
Document Title Our Favorite People ~ Favorite City Tour Document Title Our Favorite Peaple ~ Favorite City Tour 


Class media-body _~) Bl tz 8 
- v 


| tocelaine@FavoriteCin 


our. 


The text mailto:elaine@favoritecitytour.com appears in the Text Display 


link field in Live view. 


9 Save the file. 


You have learned a few techniques to add links to text content. You can add links to 


images too. 


Creating an image-based link 


Image-based links work like any other hyperlink and can direct users to internal 
or external resources. You can use the Insert menu in Design view or Code view or 
apply links and other attributes using the Element Display interface in Live view. 


Creating image-based links using the Element Display 


In this exercise, you will create and format an image-based link using the email 
addresses of each Favorite City Tour employee via the Element Display. 


If necessary, open contact-us.html in Live view from the site root folder. 
Make sure the document window is at least 1200 pixels wide. 


1 


2 Select the image of Elaine in the card-based content section. 


The Element Display appears focused on the img element. The hyperlink 
options are hiding in the Quick Property inspector. 
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fn) 


4| the 


3 Inthe Element Display, click the Edit HTML Attributes icon E. 


The Quick Property inspector opens and displays options for the image attri- 
butes src, alt, Link, width, and height. 


4 Click in the Link field. If the email address is still in memory from the previous 
exercise, simply enter mailto: and paste the address in the Link field. Other- 
wise, enter mailto:elaine@favoritecitytour.com in the Link field after the 
colon and press Enter/Return to complete the link. Press the Esc key to close 
the Quick Property inspector. 


HIME \ HTML 


j sre fimagesfelaineipgl | & | sre images fefiine.jpq | see images/elaine,jng & | 


alt Elaine, Favorite City T ant Elaine, Favorite City T ak Elaine, Favorite City T 


width 106 | veldth 100 


| width — 100 


at height 125 J height 125 height 125 


) Tink 


the) tink 
; 


cru) 
indi BOOTSTRAP 


) tink [ mailto 
| ae 


/ . / 5 
| target none warget none ” 


Cor Cliptoshape C) ( fF | BOOTSTRAP 


; Clip to Shape © Of Cp to Shape C) CQ) EF) 


Q O make Image Responsive 


i 
I 
f 
i 
} 
i 
| BOOTSTRAP | 
| } 
} 
} 
i 
5 
t 


Shi 
} E AERRIRTE ATR STRB nO Ci make Image Responsive | O) Make Image Responsive 
@ Note: In the past, The hyperlink that is applied to the image will launch the default email program 
images that featured in the same fashion as it did with the text-based link earlier. 
a hyperlink were 
automatically styled 5 Select and copy the email address for Sarah. 
with a blue border. That Repeat steps 2 through 4 to create an email link for Sarah’s image. 


styling was deprecated 
in HTMLS. That is no 


longer the case. 


6 Create image links for the remaining employees using the appropriate email 
address for each. 


7 Load the page in a browser and test each link. 


All the image-based links on the page are complete. You can create text-based links 
using the Text Display too. 


Creating text links using the Text Display 


In this exercise, you will create text-based email links as needed for the remaining 
employees. 


1 Ifnecessary, open contact-us.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


2 Select and copy the email address for Sarah. 


3 Double-click to edit the paragraph containing Sarah’s email address. 
Select her email address. 


The Text Display appears around the selected text. 
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Click the Link icon. 


A Link field appears. A folder icon displays on the right side of the Link field. If 
you were linking to a file on the website, you could click the folder to target the 
file. In this case, we're creating an email link. 


Insert the cursor in the Link field, if necessary. 
Enter mailto: and paste Sarah’s email address. 
Press Enter/Return. 


accommodations for existing 
events and classes. So, make 
sure Sarah knows if you have 


accommodations for existing 
events and classes. So, make |. 
sure Sarah knows if you have | 
necial requirements. 


a + | 


accommodations for existing 
events and classes. So, make 
sure Sarah knows if you have | 
any special requirements. 


necial requirements. 


a] 


6 Using the Text Display, create email links for the remaining email addresses 


displayed on the page. 


7 


Matthew Ridges j 
Matthew is our do-it~all guy. Hey 
takes care of the business end/ 
of things. He maintains our 
website and the reservation 
system. He's also experienced: 
at helping people complete 
their booking and can step in to 
help when everyone else is 
busy. 


& Lainey Harris 

| Lainey manages our research | 
and development department. 
She researches new tour 
destinations and the service 
at local restaurants, hotels, 
spas, or other business that 
we recommend to our 
travelers. 


Maggie is our office manager. - 
Although she's the youngest 

3 member of our staff she is our 

mother hen. She makes sure 

everyone has what they need 

to do their job at the highest 

level, 


You may never meet Maggie 
but rest assured she is 
working hard every second of 
the day in the background to 
keep the lights burning, 
computers humming and all 
the phones working. 


She listens to your comments 
on our recommendations and 
checks out your compiaints, 
You can expect to hear from 
Lin when you book a tour. She 
will want to know what you 
thought of our offerings. 


Even though Matthew is good - 
with numbers, he's also an avid 
biker and can help you book a 
trip to a great biking 
destination, 


Email Matthew at: 
Email Lainey at: matthew@FavoriteCityTour.com 


lainey @FavoriteCityT oi 


1220x550 - [By 


When you are finished, you may notice that Matthew’s email address is extend- 
ing beyond the edges of the second column. 


Normally, when text gets close to the end of a column, it will wrap to the next 
line, but Matthew’s email address is treated as one long word and cannot wrap. 
There is also no hyphenation or practical way to break the address either. The 
best way to deal with this issue is to apply a special CSS style for the email 
address. 


Insert the cursor in Matthew’s email address. 
Select the a tag selector. 


The Element Display appears on the <a> element containing Matthew’s email 
address. 
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8 If necessary, click the All button in CSS Designer. 


9 Select favorite-styles.css in the Sources pane. 
Click the Add Selector icon *. 


A new selector, .media-body p a, appears in the Selector pane. This selector 
will target only the links within the list-based content section. Since there are no 
other text-based links in these profiles, the selector should be fine as is. 


10 Press Enter/Return to create the new selector. 
Add the following property to the rule .media-body p a: 
font-size: 90% 


Files CC Libraries insert CSS Designer 


il 


nin js bootstrap-4.3.1,js 


Vi 


Alt Current 


T6T.98 px 

+ — Sources + — Properties 

5a ALL SOURCES £3 Show Set 
bootstrap-4.3.L.css ( Read Only ) 


se fia . More 
“favorite-styles.css E} Mor | 
; : font-size ss: | 9004 lS. 
+ @Media : GLOBAL : k 

GLOBAL 

+ -— Selectors * 


£ Fitter CSS Rules 


prone 


With numbers, he's also at 
avid biker and can help you 
book a trip to a great biking 
destination. 


natthew@FavoriteCitylour.com] | 


carousel-caption 
RR RR RE SERS -carousel-caption 5 
media-body pa 


All Mode: Lists rules for entire document 


All the email addresses resize. Matthew’s email address now fits entirely 


within the column. This styling should take care of the spacing problem for 
the moment. 


11 Save and close all files. 


Targeting page elements 


As you add more content, the pages get longer and navigating to that content gets 
more difficult. Typically, when you click a link to a page, the browser window loads 
the page and displays it starting at the top. But it can be helpful when you provide 
convenient methods for users to link to a specific point on a page especially when 
the content they are looking for may be a fair distance from the top. 


HTML 4.01 provided two methods to target specific content or page structures: a 
named anchor and an id attribute. In HTMLS, the named anchor method has been 
deprecated in favor of ids. If you or your website have used named anchors in the 


past, don’t worry—they won't suddenly cease to function. But from this point on, 
you should start using ids exclusively. 
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Attack of the killer robots 


Although on the surface it sounds like a good idea to add email links to make it .” 
easier for your customers and visitors to communicate with you and your staff, email 
links are a double-edged sword. The internet is awash in bad actors and unethical 
companies that use intelligent programs, or robots, to constantly search for live 
email addresses (and other personal information) that they can flood with unsolic- 
ited email and spam. Putting a plain email address on your site as shown in these 
exercises is like putting a sign on your back that says “kick me.” 


In place of active email links, many sites use a variety of methods for limiting the 
amount of spam they receive. One technique uses images to display the email 
addresses, since robots can’t read data stored in pixels (yet). Another leaves off the 
hyperlink attribute and types the address with extra spaces, like this: 


elaine @ favoritecitytour .com 


However, both of these techniques have drawbacks; if visitors try to use copy and 
paste, it forces them to go out of their way to remove the extra spaces or try to 
type your email address from memory. Either way, the chances of you receiving 
any communication decreases with each step the user My to accomplish without 


additional help. 7 


At this time, there is no foolproof way to prevent someone from using an email 
address for nefarious purposes. Coupled with the fact that fewer users actually have 
a mail program installed on their computers anymore, the best method for enabling 
communication for your visitors is to provide a means built into the site itself. Many 
sites create web-hosted forms that collect the visitor's information and message and 
then pass them along using server-based email functionality. 


Creating internal targeted links 


In this exercise, you'll work with id attributes to create the target of an internal link. 
You can add ids in Live, Design, or Code view. 


1 Open events.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


2 Scroll down to the table containing the seminar schedule. 


When users move down this far on the page, the navigation menus are out of 
sight and unusable. The farther down the page they read, the farther they are 
from the primary navigation. Before users can navigate to another page, they 
have to use the browser scroll bars or the mouse scroll wheel to get back to the 
top of the page. 
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Older websites dealt with this situation by adding a link to take visitors back to 
the top, vastly improving their experience on the site. Let’s call this type of link 
an internal targeted link. Modern websites simply freeze the navigation menu 
at the top of the screen. That way, the menu is always visible and accessible to 
the user. You will learn how to do both techniques. First, let’s create an internal 


targeted link. 


Internal targeted links have two parts: the link itself and the target, or destina- 
tion. Which one you create first doesn’t matter. 


3 Click in the 2020 Seminar Schedule table. 
Select the table’s parent section tag selector. 


2020 SEMINAR SCHEDULE 


S| Seminar Description 


Get a drink, get a meal and get a room. Learn the basics of getting 
French for travelers along in France. Learning some basic phrases can melt a lot of 
barriers. 


diy .containermt-4 div row div. —.col-Ig-12 


mo Section ID Class (None v) 


The Element Display appears focused on the section element. 


4 Open the Insert panel. 
Select the HTML category. 
Click the Paragraph item. 


The Position Assist dialog appears. 
5 Click Before. 


Nov 2, 2020 Loy Krathong & Yi Nov 2, 2020 Loy Krathong & Yi Pe 


ze Lg Fo Krampusnacht 
. aS Ce> BS + inate anaLASNSISY 
ny | Belpre After Wrap Nest 


' Dec 5, 2020 Krampusnacht 


{This is the content for Layout P Tag 
Ly 


| co 
A new paragraph element appears in the layout, with the placeholder text 
This is the content for Layout P Tag. 


Seminar 


6 Select the placeholder text. 
Type Return to Top to replace it. 
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Nov 2, 2020 Nov 2, 2020 Loy Krath 


Dec 5, 2020 Dec 5, 2020 Krampusn 


= og 
TOT apes 
{ (Return to Top 
Ly 


The text is inserted between the two tables, formatted as a <p> element. The 
text would look better centered. Bootstrap has a CSS class already defined for 
centering text that has been applied to all the content section headings. 


7 Click the Add Class/ID icon (+) for the new <p> element. 


8 Type .text-center in the text field and press Enter/Return, or choose 
.text-center from the hinting menu. 


= a 


Dec 5, 2020 Krampusnacht 


ee P 
: Return to Top 
r 
/ 
2020 SEMINAR SCHEDULE 


The Return to Top text is aligned to the center. The tag selector now displays 
p.text—center. 


9 Select the element Return to Top. 
Click the Edit HTML Attributes icon E and type #top in the Link field. 
Press Enter/Return to complete the link. 


June 12-14, 2020 


June 12-14, 2020 June 12-14, 2020 


scant ee oeenne tae SR en 


July 17-26, 2020 HTML | HTML 
Aug 7-31, 2020 format p : format p & 
- = i 4 = i | FEE eee | 
Aug 26, 2020 i] tink + | tink — { #top| \@ |} 
‘ _ ‘ H | EEE ———— pene 
© Aug 30-31, 2020 | | target none & v 
' Oct 2-4, 2020 | Bi =< 
BOOTSTRAP { F? 
Oct 31-Nov 2, 2020 | 
| RSS REAR SN enone ant t | align Sete _- | BOOTSTRAP = 
| Nov 2, 2020 i iF ty ae eee 
a : | transform TY Tt tt { | align =o b— 
Dec 5, 2020 — = eases i transform TY Tt tt ta 


[ccc J] 


By using #top, you have created a link to the top of the current page. This target 


is now a default function in HTMLS. If you use the plain hash (#) symbol or 
#top as the link target, the browser automatically assumes you want to jump to 
the top of the page. No additional code is needed. 
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10 Save all files. 
11 Open events.html in a browser. 


12 Scroll down to the Seminar table. 
Click the Return to Top link. 


The browser jumps back to the top of the page. 


You can copy the Return to Top link and paste it anywhere.in the site you want 


to add this functionality. 


13 Switch to Dreamweaver. 
Select the text Return to Top and press Ctrl+C/Cmd+C to copy the <p> element 
and its link. 


14 Insert the cursor in the Seminar table. 
Select the section tag selector. 
Press Ctrl+V/Cmd+V to paste. 


Pee Ot SRE ME TE RL VR REI PTO UR MIR een ” ve 


barriers 


are concerned about their ecological footprint and want to minimize 
or eliminate their impact. We have several experts who will detail the 
various steps you can take to do this. 


3 weeks Ww $30 


Return to Top 


A new p element and link appear at the bottom of the page. 


15 Save the file and preview it in the browser. 
Test both Return to Top links. 


Both links can be used to jump back to the top of the document. In the next exer- 
cise, you'll learn how to create link targets using element attributes. 


Creating a destination link in 
the Element Display 


In the past, destinations were often created by inserting a standalone element 
known as a named anchor within the code. Today, id attributes have replaced the 
named anchor in HTMLS. In most cases, there’s no need to add any extra elements 
to create hyperlink destinations, since you can simply add an id attribute to a 
handy element nearby. 


In this exercise, you will use the Element Display to add id attributes to the tables 
for navigation purposes. 
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1 Open events.html in Live view. 
Make sure the document window is at least 1200 pixels wide. 


2 Click the 2020 Events Schedule table. 
Select the table tag selector. 


The Element Display and the Property inspector display the attributes currently 
applied to the Events table. You can add an id using either tool. 


3 Click the Add Class/ID icon. Type # 


If any ids were defined in the style sheet but unused on the page, a list would 
appear. Since nothing appears, it means that there are no unused ids. Creating a 
new one is easy. 


4 Type festivals and press Enter/Return. 


Want to see how the world parties? Want Want to see how the world parties? Wan Want to see how the world parties? Want to 
inars. The schedule is updated cal semina e schedule is updated ocal semina The schedule is updated on 2 
= Me iC tfestivals * é 

: S Select a source 


(¢ 
{ favorite-styles.css 4} 


Seiect a media query: r 2 


Select a media query + 


The CSS Source dialog appears. You do not need 6 add the id to any style sheet. ® Note: When creat- 
ing ids, remember that 
they need to have 
names that are used 
only once per page. 
They are case sensitive, 
content on a page for hyperlinks. so look out for typos. 


5 Press Esc to close the dialog. 


The tag selector now displays #festivals and no entry was made in the style 
sheet. Since ids are unique identifiers, they are perfect for targeting specific 


® Note: There is no need for a CSS selector for this id. If you accidentally create one, feel free to 
delete the selector in CSS Designer. 


You also need to create an id for the Seminars table. 


6 Repeat steps 2 through 4 to create the id #seminars on the Seminars table. 


Seminar Seminar Seminar 


The tag selector now displays #seminars. 


® Note: If you add the id to the wrong element, simply delete it and start over. 


7 Save all files. 


You'll learn how to link to these ids in the next exercise. 
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1 
2 
> Tip: You can select 3 
single words by double- 
clicking them. 4 
© Note: Hyperlinks 
cannot contain spaces; 
make sure the id 
reference follows the 5 
filename immediately. Enter/Return. 
“Sarah Harvey 


She can also create custom 
events for people with special 
needs such as handicap 
access or special dietary 


needs, or make 


make sure Sarah OE 


have anv snecial 


Targeting id-based link destinations 


By adding unique ids to both tables, you have provided ideal targets for internal 
hyperlinks to navigate to a specific section of your webpage. In this exercise, you 
will create a link to each table. 


Sarah arranges all our ‘ 
seminars and classes. Sarah 
makes these offerings start on 
time and meet their goais, so | 
vou can enjoy every minute. 

= ol 
‘She can also create custom 
events for people with special | 
needs such as handicap 
access or special dietary 
, needs, or make 


6 


vou Can enjoy every minute. 


7 Save the file and preview the page in a browser. 
Test the links to the Festivals and Seminars tables. 


If necessary, open contact-us.html in Live view. Make sure the document 


window is at least 1200 pixels wide. 


Scroll down to the profile of Sarah Harvey. 


Select the word festivals in the second paragraph of the profile. 


Using the Text Display, type events. html to create a link to the file. 


This link will open the file, but you're not finished. You now have to direct the 


browser to navigate down to the Festivals table. 


Type #festivals at the end of the filename to complete the link, and press 


Sarah Harvey 
Sarah arranges all our 
seminars and classes. Sarah 


vo can enjoy every minute. 


=e 


She can also create custom 


needs such as handicap 
access or special dietary 


makes these offerings start on 
time and meet their goals, so | 


events for people with special | 


make sure Sarah knows if you | 


Sarah Harvey _ 

Sarah arranges ail our 
seminars and classes. Sarah 
makes these offerings start on 
time and meet their goals, so | 
you can enjoy every minute. 


She can also create custom 


events for people with special : 
needs such as handicap 
access or special dietary 
heeds, or make ; 


make sure Sarah knows if you | 


The word festivals is now a link targeting the Festivals table in the events.html 


file. 


Select the word seminars. 
Create a link to the events.html file. 


Type #seminars to complete the link and press Enter/Return. 
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ir eeds, or make 
eccommoda’ 


VOu Can enjoy every minute. 
a 
phe can also create custom 
jevents for people with special | 
needs such as handicap | 


access or special dietary 


vents. htmi#seminard 
\festivals and seminars. So, 
make sure Sarah knows if you 3 


have anv snecial 


you can enjoy every minute. 
She can also create custom 
events for people with special : 
needs such as handicap 


access or special dietary 
jheeds, or make 


comme rest 
festivals and|seminars] So, 

make sure Sarah knojws if you 
have anv snecial 


fw: 


The links open the Events page and jump to the appropriate tables. You’ve learned 
how to create a variety of internal and external links. There are only a few more 
chores remaining. 


Locking an element on the screen 


Most elements you encounter on a webpage will move with the page as you scroll 
down through the content. This is the default behavior in HTML. For specific 
purposes you may want to freeze an element so that it stays on the screen. This has 
become very popular, especially with navigation menus. Keeping the menu visible 
at all times provides handy navigation options whenever desired. 


The navigation menu is not editable directly in the child pages created from the 
template. The change you need to make has to be done in the template. 


1 Open favorite-temp.dwt in Live view. 
Make sure the document window is at least 1200 pixels wide. 


The navigation menu appears at the top of the page but scrolls with the rest of 
the content. 


A bug in Dreamweaver makes it difficult to work with elements in the non- 
editable regions of the page in Live view. In most cases, you won't be able to 
directly select many elements in the document window. But you can use the 
DOM panel. 


2 Choose Window > DOM to open the DOM panel, if necessary. 
Locate the nav element in the DOM panel. 


Note that there are several Bootstrap classes assigned to this element already; 
you'll assign one more. 


3 Double-click to edit the classes assigned to the nav element. 


4 Insert the cursor at the end of the array of classes. 
Press the spacebar to insert a space. 
Type .fixed- 


DOM Assets Sninpets DOM Assets Snippets = 
- [a> v 
> [heady > 
v [Body v 
+ > nav | .navbar .navbar-expand-Ig .navbar-dark .bg-dark .fix| > [Rav navbar navbar-expand=lg navbar-dark .bg-dark .fixed-top 
> fheader> row .clearfix > [header>, row 
> -fixed-bottom > [| mmtemplateif> 
perenne il yoann fl 
[av .fixed-top sens ay 
> é i mt-4 container mt-4 
Gy pO Eee: .position-Nxed —f 
> | mmtemplateieditable > z > [mmtemplate:editable 
= a 
> {div> container .bg-dark .p-4 > [ div, container .bg~dark .p-4 
> [footer > [footer> 


The hinting menu displays a list of defined classes and filters them as you type. 
The class . fixed-bottom would position the horizontal menu at the bottom of 
the browser window. The class . fixed-top positions it at the top. 
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> Tip: Using em mea- 
surements for menus 
and other controls 
ensures that the struc- 
ture will adapt better if 
visitors use larger font 
sizes, since ems are 
based on the font size. 


5 Select the class . fixed-top and press Enter/Return to complete the change. 


As soon as you add the class, the header element shifts under the horizontal 
menu. If you scroll down the page, you will see that in Live view the menu stays 
at the top of the window. It should work the same way in a browser. 


The effect is close to what we wanted but not complete. Although the menu 

is fixed to the top of the screen, it obscures part of the header. Applying this 
Bootstrap class has basically taken the menu out of the normal flow of the docu- 
ment. It now exists in a separate world, floating above the other elements. 


To make the rest of the content reorient properly to the original page design, 
you'll have to add spacing above the header element to move everything back 
into place. To move it down below the menu, you need to add some space to the 
rule formatting it. 


6 Add the following property to the header rule: 


margin-top: 2.6em 


Files CC Libraries insert CSS Designer = 


All Current 
+ — Sources + — Properties 
2 ALL SOURCES * 16 fy £3 Show Set 
bootstrap-4.3.1.css ( Read Only ) url images/favcity-logo.jpg © 
favorite-styles.css i gradient /. / 
: ston eee background-position ; center center 
a background-size : 80% auto 
+ — Selectors background-repeat : 33 as £ ® 
£ Filter CSS Rutes 
header p EJ] More 
header “margin-top =| 2.6em 
nay .container ty k 


All Mode: Lists rules for entire document 


The header element shifts back down to its original position. 


7 Save all files. 


The menu is almost complete. You may have noticed that some of the format- 
ting of the horizontal menu is a bit off. Let’s adjust the colors to better match 
the site color scheme. 


Styling a navigation menu 


A close inspection of the horizontal menu will identify inconsistent styling, 
especially when you interact with the menu items. 


1 If necessary, open favorite-temp.dwt in Live view. 
Make sure the document window is at least 1200 pixels wide. 


2 Position the cursor over any of the menu items and observe the behavior of its 
styling. Move the cursor to another item and note any changes. 
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% favorite-tempdwt" X faynrite-tempdwt* 


sgotstrap~4.3. 1.055 fquery-3.3. Lmia js. Popper min. favorite-styles.css* jasery-3.3.1.minjs 


favoritesstyles.cos* 


OLatrap-4.F, E035 Pooper mins 


As the cursor passes over a menu item, the text color changes from blue to 


white. This change is enabled by the pseudo-class : hover. Since you did not 
create any styling for the :hover behavior, you can assume it is part of the 
Bootstrap framework. 


In Lesson 6 you defined several rules to override the default styling of the 
horizontal menu. Two in particular style the individual menu items, or buttons. 
To modify the styling fully, you will have to create two new rules. The easiest 
method is by duplicating the two existing rules. 


3 In CSS Designer, select the All button, if necessary. 
Select favorite-styles.css in the Sources pane. 


4 Select the rule .navbar-dark .navbar-nav .nav-Link. 
Examine the properties of the rule. J 


This rule formats the color of the text. The current :hover styling changes the 
text to white, which makes it hard to read. Let’s change it to black instead. 


5 Right-click the rule .navbar-dark .navbar-nav .nav-link. 


6 Select Duplicate from the context menu. 
© Note: The pseudo- 


class must be added 
directly to the end of 
the class .nav-Link 
with no spaces. 


An exact copy of the rule is created. Note that the selector is editable. 


7 Click at the end of the class .nav-link. 
Type :hover and press Enter/Return. 


Files CC Libraries Insert CSS Designer Files CC Libraries insert CSS Designer Bo9 
Ail Current Alt Current 

+ — Sources + Properties + — Sources 2 Properties 

ALL SOURCES fF ( Show Set f ALL SOURCES ; es] & Show Ser 
bootstrap-4.3.1.css { Read Only ) : bootstrap-4.3.4.css ( Read Only } 

ERCP PASO SE: 5, 5 Text jes Deere a of Text 
favorite-styles.css ; (2 Tex |“ favorite-styles.css : 

. color > TP 2006609 © color : |B #006099 
i + ¢ 

+ erseain : GLOBAL font-family + Source Sens Pro @Media ; GLOBAL ; font-family + Source Sans Pro 

GLOBAL = GLOBAL 

+ - Selectors EF] More + — Selectors F] More 
PD Fitter C88 Put 2D Filter cs 

.bg-dark ibg-dark 

ul.navber-nav 


wh navbar-nav 


-tavbartay Go to Code 


header h2 Copy All Styles 


navbar-dark .navbar-nev .nav-link 


navbat-nay .navitem 


header h2 4 Copy Styles > header h2 
Corkainer header h2 aslink, haader h2 a:visited 
header p container .novber-brand 


Duplicate h 


All Mode: Lists rules for entire document 


The new rule targets the : hover state of the link text. 
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Files CC Libraries Insert CSS Des! 


+ - Sources 

ALL SOURCES 

bootstrap-4.3.1.css. ( Read Only ) 
- favorite-styles.css 

+ @Media : GLOBAL 
GLOBAL, zs ans) DRIES. 

+ — Selectors 
2 Piter 

.bo-dark 

ulnavbar-nay 

snavoar-dark .navbar-nay .nav-ink 


-pavbar-nay nayitem 


All Mode: Lists nutes for entire document 


9 


10 


Files CC Libraries insert 


+ — Sources 

ALL SOURCES 
bootstrap-4.3.1,.c55 ( Read Only ) 
favorite-styles.css 


+ @Media : GLOBAL 
GLOBAL 
+ = Selectors 
per 
smavbardark .navbar-nay .navdink:hover 
Go to Code 


Copy All Styles 


i. 


header h2 
header h2 at d 
container. Copy Styles => 
header p 
header Duplicate 
hav container 

body 


AYLI 


-dark snavbar-nay nav-linkchover 


CS$$ Designer 


Change the following property as highlighted color : #000 
Delete the property font-family: seuree—sans—pre 


33:4 
a 1 
igner Ea Files CC Libraries Insert CSS Designer 4 | 
Alt Current All | Current | 
i + Properties + - Sources | + — Properties 
i ) £4 Show Set ALL SOURCES (7) El € Show Set 
| bootstrep-4.3.L.css ( Read Onty ) 
[B) text ee tyles.css ; fo. 
color + BP 000! : BP 2000 
| font-family ; Source Sans Pro 
| wore 
| 
ul.naybar-nav 


avbar-dark navber-nay .nav-link 


snavbar-nay .nav-item : 
Ail Mode: Lists rules for entire document 


When you create a pseudo-class, you need to declare only the properties 
that change from one state to the next. Therefore, there’s no need to keep the 
font-family property. 


Position the cursor over any of the menu items. 
Move the cursor to another item. 


The link text changes from blue to black. That looks much better, but the change 
could be a bit more dramatic. A change in the background property would 
enhance the : hover effect. 


Right-click the rule .navbar-nav .nav-item. 
Select Duplicate from the context menu. 
Edit the selector as highlighted: 


.Navbar-nav .nav-itemshover 


Has CC Libraries Insert. CSS Designer 


All Current Ail Current 
+ Properties + — Sources + Properties 
& Show Set ALL SOURCES 8 Show Set 


fia Oo) BeREaea 


Se Layout 


: 108px 


savbar-dark .navbarnay .navlink:hover 


fevdarnay .nav-item 


navbar-nay .nav-item:hover } x 


der on 

Text jer h2 ® fe 
text-align header h2 aslink, header h2 azvisited : 

container .navbar-brand text-align 

header p i 
Gl border wRe 

header CS Borde 
solid + px solid #433 hay container border + Ipx sold #433 


Node: Lists nies for entire docur 


All Modes Lists rules for entire document 
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The original rule styles the button. One of the properties sets a gradient back- 
ground. Reversing the direction of the gradient would create a dramatic effect. 
First, you need to delete all the properties that are unneeded. 


11 Delete the following properties: width, margin, text-align, and berder. 


Files Ct libraries Insert CSS Designer Y Bo: 4 files CC Libraries fysert CSS Designer = 
Al Current A Current 
+ — Sources + Properties + — Sources + Properties 
ALL SOURCES S(t] fa & Show Set ALL SOURCES ‘Be BB Show Set 
bootstrap-4.3.1.css ( Read Only } bootstran-4.3.1.css { Read Only ) z 
favorite-styles,css favorite-styles.css ee 
background-image 
ad ®Media : GLOBAL + @Media ; GLOBAL 
GRE Rae gradient y i radient{ 1kikieg, #02. ef 
‘url 
+ — Selectors + = Selectors t ickground mace gradient 
Pp Pt 


pavbar-dark .navbar-nav .navelink:hover navbar-dark .navbar-nav .nav-link:hover £5) More 


spavbar-nay .nav-item: 


navbar-nay nay-item;hover 


savbar-nay .ney-item, 


“hay -nevitemhover 


header h2 


Text : 

header h2 a:link, header h2 a:visited header h2 a:link, header h? a:visited 
text-align = : 

container .navbar-brand ‘ tainer .navbar-brand 

header p header p 
& Border 


header header 


nav .container ipx sold #fff3 nav container 


Ali Mode; Lists rules for entire document 


The only property remaining is background-1 mage. 
12 Click the Gradient Color Picker in the Properties pane. 


13 Change the angle to 0. 
Press Enter/Return to complete the change. 


Pi 


rgba(238,221,0,1.00) RGBa | Hex | HSLa 


14 Position the cursor over any of the menu items. 


The gradient background reverses direction and the text displays in black. The 
effect provides a nice interactive behavior to the menu items. 


Before you save the template and update all the pages, there’s a new kind of link 
you should add to the site: a telephone link. 
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Adding a telephone link 


Clicking to dial a phone number on a website was not a “thing” before the debut 
of the smartphone. Today, millions of people surf the internet using smartphones 
every day. A telephone link is an essential component of any page if you want to get 


customers to call your business. 


In this exercise, you will learn how to create a clickable telephone link. 


1 Scroll down to the bottom of the template. 


The address block features the company phone number. 


Some phones are smart enough to recognize phone numbers automatically. 
Adding a link to the number will ensure all phones will enable you to click to 
dial it. Since this is a locked portion of the template, you probably won't be able 
to select the phone number and add a link to it in Live view. 


2 Switch to Design view. 
Select the phone number. 


When creating a phone link, leave off any decorative characters and enter it 
exactly how it should be dialed. Don’t use hyphens or parentheses but go ahead 
and add the country code. 


3 Inthe Property inspector, enter tel: 14085551212 in the Link field. 


container. bg~dark.p-4 div row div .col-md~-4.col-ig-12.col-6.row — address .col-lg-6 Pe 


Format None a Class (ce Bid aka Title 


ID 5 Link 


A 

ie 

| a 

< 

LY, 
ay wo 
ron 

ia 

ees 

< | iat 


Document Title Insert Title Here ~ Favorite City Tour 
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4 Press Enter/Return. 


When you press Enter/Return, you should see an <a> element added to the tag 
selectors. The telephone link is complete. 


5 Save the template and update all pages. 


6 Close the template and update all child pages. 
Save changes to favorite-styles.css. 


You have learned how to create links in a variety of ways and even learned how to 
format an interactive behavior on the horizontal menu and freeze it to the top of 
the screen. Creating the hyperlinks is just the first part of the job; you next need to 
learn how to test them. 


Checking your page 


Dreamweaver can check your page, as well as the entire site, for valid HTML, 
accessibility, and broken links. In this exercise, you'll learn how to check your links 
sitewide. 


1 If necessary, open contact-us.html in Live view. / 
J 

2 Choose Site > Site Options > Check Links Sitewide. 

Find [ETE§ window Help 


Find Site Window Help 


New Site... Site os 
Manage Sites... 
x « 
OB Link Checker “ 
2D tstrap-4.3.1Js 1a Show: 8roken Links ¥ inks to files not found on local disk) 
ut Ri > Files T ‘ Broken Links Fi} 
Check In XORBU 5 & fabout-us.htm! :  index.humt Sas E 
Undo Check Out {B /about-us.hem! index.htmt 
gla ( /about-us.htm! index.htm! = 
[B /contact-us.hem! index.htm! 
[3 /contact-us.html index.htm! 
& jeontact- us.html index.html 
srt Total, 12 HTML, 11 Orphaned 192 All links, 150 OK, 28 Broken, 14 External 


The Link Checker panel appears. The panel reports broken links to the file 
index.html. This is a link to a nonexistent page. You'll create this page in an 
upcoming lesson, so you don’t need to worry about fixing it now. 


The panel reports that the link #top is broken. The link works, but there’s no 
actual target defined in any of the pages, so the panel reports it anyway. If you 
expect to get visitors who use older browsers, you might want to add the id 
#top to the nav element in the template. 


The report also identifies a link to an SVG graphic defined in the Bootstrap style 
sheet. As you can see, the Link Checker will also find broken links to external 
sites and to resources. None of the errors should affect the operation of the 

site, and the links to the home page will be fixed once you create that page in 
Lesson 11, “Publishing to the Web’ 


wea ae Siesta 


© Note: The total 


number and types of 


missing and broken 
links may vary from 
pictured. 
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3 Close the Link Checker panel, or, if it’s docked, right-click the Link Checker tab 
and choose Close Tab Group from the context menu. 


You’ve made big changes to your pages in this lesson by creating links in the main 
navigation menu, within text blocks, to specific destinations on pages, to email, and 
to a phone number. You also applied links to images and learned how to check your 


site for broken links. 


Self-paced exercise: Adding additional links 


First, using the skills you have just learned, open events.html and create desti- 
nation links for the words festivals and seminars in the intro paragraph above 
the tables. 


Remember that each word should link to the appropriate table on that page. Can 
you figure out how to construct these links properly? If you have any trouble, check 
out the events-finished.html file in the lesson/finished folder for the answer. 


Second, at the bottom of each of the pages there are three link placeholders with 
the text Link Anchor. You'll have to open the template to edit these links. Point 
them to the following external targets: 


Link text: US State Dept 

Link URL: https: //travel.state.gov 

Link text: US Customs 

Link URL: https://cbp.gov/travel 

Link text: Overseas Shipping 

Link URL: https: //usps.com/international 


Finally, there is an email link placeholder in the address block at the bottom of the 
template. Edit this placeholder so that it is structured properly to create an email. 
When you finish, don’t forget to save the template and update pages. 
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Describe two ways to insert a link into a page. 

What information is required to create a link to an external webpage? 

What's the difference between standard page links and email links? 

What attribute is used to create destination links to specific elements on a page? 
What limits the usefulness of email links? 

Can links be applied to images? 


How can you check to see whether your links will work properly? 


Review answers 


1 


Select text or a graphic, and then, in the Ppey inspector, click the Browse For File 
icon next to the Link field and navigate t@ the desired page. A second method is to 
drag the Point To File icon to a file within the Files panel. 


To link to an external page, you must type or copy and paste the full web address (a 
fully formed URL, including http:// or other protocol) in the Link field of the Property 
inspector or the Text Display. 


A standard page link opens a new page or moves the view to a position somewhere on 
the page. An email link opens a blank email message window if the visitor has an email 
application installed on their system. 


You apply unique id attributes to any element to create a link destination, which can 
appear only once in each page. 


Email links may not be very useful because many users do not use built-in email pro- 
grams, and the links will not automatically connect with internet-based email services. 


Yes, links can be applied to images and used in the same way text-based links are. 


Run the Link Checker report to test links on each page individually or sitewide. You 
should also test every link in a browser. 
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PUBLISHING TO THE WEB 


Lesson overview 


In this lesson, you'll publish your website to the internet and do the 


following: 


Define a remote site. 
Define a testing server. 
Put files on the web. 
Cloak files and folders. 


Update out-of-date links sitewide. 


This lesson will take about 90 minutes to complete. To get the lesson files 
used in this lesson, download them from the webpage for this book at 
www.adobepress.com/DreamweaverC1IB2020. For more information, see 
“Accessing the lesson files and Web Edition” in the Getting Started sec- 
tion at the beginning of this book. 
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The goal of all the preceding lessons was to design, 
develop, and build pages for a remote website. But 
Dreamweaver doesn't abandon you there. It also 
provides powerful tools with which to upload and 
maintain a website of any size over time. 
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© Note: If you have 
not already down- 
loaded the project files 
for this lesson to your 
computer from your 
Account page and 
defined a site based on 
this folder, make sure to 
do so now. See “Getting 
Started” at the begin- 
ning of the book. 


Defining a remote site 


Dreamweaver’s workflow is based on a two-site system. One site is in a folder on 
your computer’s hard drive and is known as the Jocal site. All work in the previ- 
ous lessons has been performed on your local site. The second site, known as the 
remote site, is established in a folder on a web server, typically running on another 
computer, and is connected to the internet and publicly available. In large com- 
panies, the remote site is often available only to employees via a network-based 
intranet. Such sites provide information and applications to support corporate 
programs and products. 


Dreamweaver supports several methods for connecting to a remote site. 


e FTP (File Transfer Protocol): The standard method for connecting to hosted 
websites. 


| 


Site Be 
Basic Advanced 
Servers. i 
css Preprd Server Narne: Unnamed Server 2 | 
Advanced! 
Connect using: FTP k 
a | 
v FIP | 
FTP Address: 5 Port: 21 | 
SFTP 


Username: ETP over SSL/TLS (implicit encryption) 


Password FTP over SSL/TLS (explicit encryption) 
Local/Network 
WebDAV 


Root Directory: RDS 


Web URL: http://favoritecitytour.com/ | 


e SFTP (Secure File Transfer Protocol): A protocol that provides a method to 
connect to hosted websites in a more secure manner to preclude unauthorized 
access or interception of online content. 


e FTP over SSL/TLS (implicit encryption): A secure FTP (FTPS) method that 
requires that all clients of the FTPS server be aware that SSL is to be used on 
the session. It is incompatible with non-FTPS-aware clients. 


¢ FTP over SSL/TLS (explicit encryption): A legacy-compatible secure FTP 
method where FTPS-aware clients can invoke security with an FTPS-aware 
server without breaking overall FTP functionality with non-FTPS-aware clients. 


* Local/Network: A local or network connection is most frequently used with an 
intermediate web server, known as a staging server. Staging servers are typically 
used to test sites before they go live. Files from the staging server are eventually 
published to an internet-connected web server. 


° WebDav (Web Distributed Authoring and Versioning): A web-based system also 
known to Windows users as Web Folders and to Mac users formerly as iDisk. 


* RDS (Remote Development Services): Developed by Adobe for ColdFusion and 
primarily used when working with ColdFusion-based sites. 
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Dreamweaver can now upload larger files faster and more efficiently and as a 
background activity, allowing you to return to work more quickly. In the following 
exercises, you'll set up a remote site using the two most common methods: FTP 
and Local/Network. 


Setting up a remote FTP site (optional) 


The vast majority of web developers rely on FTP to publish and maintain their sites. 


FTP is a well-established protocol, and many variations of the protocol are used on 


the web—most of which are supported by Dreamweaver. 


5 


1 
2 


Launch Adobe Dreamweaver (2020 release) or later. 


Choose Site > Manage Sites, or choose Manage Sites from the site list dropdown 
menu in the Files panel. 


Find [ETSY window Help 1 61% (4 Mon 3:18PM Jim Maivald ¢ 
New Site... = 


mee ©. Manage Sites... 3 & lesson09 
| 65 lessoni0 


| Files CC] ; 
ie aoe ts sa Y B lessonli 
| eB Manag ek 


wat Ctlaad 4 
In the Manage Sites dialog is a list of all the sites fou may have defined. 


dai 


Put OU 


Make sure that the current site, lesson11, is selected. Click the Edit icon gf. 
lesson10 Dreamweaver 
lesson11 ees acs Dreamweaver 
= g Be 


In the Site Setup dialog for lesson11, click the Servers category. 
The Site Setup dialog allows you to set up multiple servers so that you can test 
several types of installations, if desired. 
Click the Add New Server icon *. 
Enter Favorite City Server in the Server Name field. 
Site Setup for lesson11 
ate Here you'll select the server that will host \ Basic 
= Servers “ for this dialog box come from your Interne fie a 
CSS Preprocessors administrator. Server Name. | Favorite City Server 
Advanced Settings k 
Name Address Connect using: FTP 
FTP Address 
i Web URL. http://favoritecitytour.com/ 


> More Option 
pushed to the testing serve EES AEUONS 


HOGG A 
auto-push of files, edit the server settings and un 
Advanced Tab. 


@ Warning: To 
complete the following 
exercise, you must have 
a remote server already 
established. Remote 
servers can be hosted 
by your own company 
or contracted from a 
third-party web-hosting 
service. 
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@ Note: If neces- 6 From the Connect Using pop-up menu, choose FTP. 


sary, select a different 
protocol to match your Basic 
available server. Server Name: Favorite City Server 


Advanced 


Connect using: FIP 
FTP Address MET h Port: 21 
SFTP 
Username: ETP over SSL/TLS (implicit encryption) 
Password: FTP over SSL/TLS (explicit encryption) 5 
Local/Network 
WebDAV 
Root Directory: RDS 


Web URL: http://favoritecitytour.com/ 


® Tip: If you are in 7 Inthe FTP Address field, type the URL or IP (internet protocol) address of your 


the process of moving 
an existing site to a 

new internet service 
provider (ISP), you may 
not be able to use the 
domain name to upload 
files to the new server. 


FTP server. 


If you contract a third-party service as a web host, you will be assigned an 
FTP address. This address may come in the form of an IP address, such as 
192.168.1.100. Enter this number into the field exactly as it was sent to you. 
Frequently, the FTP address will be the domain name of your site, such as 


In that case, the IP 
address can be used to 
upload files initially. 


ftp.favoritecitytour.com. In most cases you should not have to enter “ftp.” in 
the field. 


8 Inthe Username field, enter your FTP user name. 
® Note: The user 
name and password 
will be provided by 
your hosting company 
or IS/IT department for 
web servers hosted by Password: eeseeecccceces Save 
your own company. ee Ss 

Crest 


Root Directory 


In the Password field, enter your FTP password. 


FTP Address: favoritecitytour.com Port: 21 


Username: favorite-ftp 


Web URL: http://favoritecitytour.com/ 


User names may be case sensitive, but password fields almost always are; be 
sure you enter them correctly. Often, the easiest way to enter them is to copy 
them from the confirmation email from your hosting company and paste them 
into the appropriate fields. 


> Tip: Check with your 9 In the Root Directory field, type the name of the folder that contains documents 


web-hosting service or publicly accessible to the web, if any. 
IS/IT manager to obtain 


the root directory name, 


Some web hosts provide FTP access to a root-level folder that might contain 
if any. 


nonpublic folders—such as cgi-bin, which is used to store common gateway 
interface (CGI) or binary scripts—as well as a public folder. In these cases, 
type the public folder name—such as httpdocs, public, public_html, www, or 
wwwroot—in the Root Directory field. In many web-host configurations, the 


FTP address is the same as the public folder, and the Root Directory field should 
be left blank. 
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10 If necessary, select the Save checkbox if you don’t want to re-enter your user 
name and password every time Dreamweaver connects to your site. 


11 Click Test to verify that your FTP connection works properly. 


FYP Address: favoritecitytour.com Port: 21 
Username: favorite-ftp 
Username; favorite-ftp 


Drearnweaver 
Passwe : Dreamweaver Asians 
An FTP error occurred - cannot make connection to host. 
H Dreamweaver connected to your Web server successfully. 1 Your login or password is incorrect. Please check your connection 
| : i it information. j 
| sootoveay | li 
| SeMpLETAN F ae 


Dreamweaver displays an alert to notify you that the connection was successful 
or unsuccessful. 


12 Click OK to dismiss the alert. 


If Dreamweaver connects properly to the webhost, skip to step 14. If you 
received an error message, your web server may require additional configura- 
tion options. 


13 Click the More Options triangle to reveal additional server options. 


\ j 
i | Uf 
in More Options | iy see Options 


Use Passive FIP 
(1) Use IPV6 Transfer Mode 
{7 Use Proxy. as defined in Preferences 


Use FTP performance optimization 


{-] Use alternative FTP move method 


The default options selected in Dreamweaver should work, but if they don't, 


consult your hosting company to select the appropriate options for your specific 


FTP server: 


¢ Use Passive FTP: Allows your computer to connect to the host computer 
and bypass a firewall restraint. Many web hosts require this setting. 


e Use IPV6 Transfer Mode: Enables connection to IP V6-based servers, which 


use the most recent version of the internet transfer protocol. 


¢ Use Proxy: Identifies a secondary proxy host connection as defined in your 
Dreamweaver preferences. 


¢ Use FTP Performance Optimization: Optimizes the FTP connection. 
Deselect this option if Dreamweaver can’t connect to your server. 


¢ Use Alternative FTP Move Method: Provides an additional method 
to resolve FTP conflicts, especially when rollbacks are enabled or when 
moving files. 


Once you establish a working connection, you may need to configure some 
advanced options. 


SERCO TERS SR RCRA REN OSORNO LORE RENE STSCI 


» Tip: If Dreamweaver 
does not connect to 
your host, first check 
the user name and 
password, as well as the 
FTP address and root 
directory, for any errors. 
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Troubleshooting yourFTP connection —s 
Connecting to your remote site can be frustrating the first time you attempt it. You 

can experience numerous pitfalls, many of which are out of your control. Here are a 

few steps to take if you have issues connecting: 


e If you can’t connect to your FTP server, double-check your user name and 
password and re-enter them carefully. Remember that user names may be case 
sensitive on some servers, while passwords almost always are. (This is the most 
common error.) 


e Select Use Passive FTP and test the connection again. 


e If you still can’t connect to your FTP server, deselect the Use FTP Performance 
Optimization option and click Test again. 


e If none of these steps enables you to connect to your remote site, check with 
your IS/IT manager or your remote site administrator or web-hosting service. 


14 Click the Advanced tab. 
Select from the following options for working with your remote site: 


¢ Maintain Synchronization Information: Automatically notes the files that 
have been changed on the local and remote sites so that they can be easily 
synchronized. This feature helps you keep track of your changes and can be 
helpful if you change multiple pages before you upload. You may want to 
use cloaking with this feature. You'll learn about cloaking in an upcoming 
exercise. This feature is usually selected by default. 


Basic E Advanced 


Remote Server 
Maintain synchronization information 
{"} Automatically upload files to server on Save 


(} Enable file check-out 


¢ Automatically Upload Files To Server On Save: Transfers files from the 
local to the remote site when they are saved. This option can become annoy- 
ing if you save often and aren't yet ready for a page to go public. 


* Enable File Check-Out: Starts the check-in/check-out system for collabora- 
tive website building in a workgroup environment. If you choose this option, 
you'll need to enter a check-out name and, optionally, an email address. If 
you're working by yourself, you do not need to select this option. 


It is acceptable to leave any or all these options unselected, but for the pur- 


poses of this lesson, select the Maintain Synchronization Information option, 
if necessary. 
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Installing a testing server 


ie a A eed 


ae ea eS @ © 
a a oe 
“ee 

«.2 

% 


When you produce sites with dynamic content, you need to test the functionality 
before the pages go live on the internet. A testing server can fit that need nicely. 
Depending on the applications you need to test, the testing server can simply be 
a subfolder on your actual web server, or you can use a local web server such as 
Apache or Microsoft's Internet Information Services (IIS). 


FOSS BF xsvorincmters andorae x 


What is XAMPP? 
XAMPP is the most popular PHF 


XAMPP is a completely ‘ree, easy to inste 


& apachefrisnds.org/inciow ister! 


(=) XAMPP Apache + Mi 


& msmp.infoier 


Pell AP & MAMP PRO 


web: development Solution : 
@ MAMP 


Jonovate Your Workflow 
Get MA 


Se 


/ 


For detailed information about installing and configuring a local web server, check 
out the following links: 


e Apache/ColdFusion: http://tinyurl.com/setup-coldfusion 


° Apache/PHP: http://tinyurl.com/setup-apachephp 


e |IS/ASP: http://tinyurl.com/setup-asp 


Once you set up the local web server, you can use it to upload the completed files 
and test your remote site. In most cases, your local web server will not be accessible 


from the internet or be able to host the actual website for the public. 


15 Click Save to finalize the settings in the open dialogs. 


The server setup dialog closes, revealing the Servers category in the Site Setup 


dialog. Your newly defined server is displayed in the window. 


16 The Remote radio button should be selected by default once the server is 


defined. If you have more than one server defined, click the Remote option for 


the Favorite City Server. 


Site Setup for lesson11 


Sit . ‘ 
a Here you'll select the server that will host your pages on the web. The settings 
Bee for this dialog box come from your Internet Service Provider (ISP) or your web 
\> CSS Preprocessors administrator. 


i> Advanced Settings 
Name Address 
{ - - — 


Favorite City Server favoritecitytour.com FTP Q 


LS 
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Tip: If disk space 

is not a concern, you 
might consider upload- 
ing the template files to 
the server as a means of 
creating a backup. 


17 Click Save to finish setting up your new server. 


A dialog may appear, informing you that the cache will be re-created because 


you changed the site settings. 


18 If necessary, click OK to build the cache. 
When Dreamweaver finishes updating the cache, click Done to close the 


Manage Sites dialog. 


You have established a connection to your remote server. If you don't currently 
have a remote server, you can substitute a local testing server instead as your 
remote server. See the sidebar “Installing a testing server” for information on 
installing and setting up a testing server in Dreamweaver. 


Cloaking folders and files 


Not all the files in your site root folder may need to be transferred to the remote 
server. For example, there’s no point in filling the remote site with files that won’t 
be accessed or that will remain inaccessible to website users. Minimizing files 
stored on the remote server may also pay financial dividends, since many hosting 
services base part of their fee on how much disk space your site occupies. If you 
selected Maintain Synchronization Information for a remote site using FTP or 

a network server, you may want to cloak some of your local materials to prevent 
them from being uploaded. Cloaking is a Dreamweaver feature that allows you to 
designate certain folders and files that will not be uploaded to or synchronized with 
the remote site. 


Folders you don’t want to upload include the Templates and resource folders. Some 
other non-web-compatible file types used to create your site, such as Photoshop 
(.psd), Flash (.fla), or Microsoft Word (.doc or .docx), also don’t need to be on the 
remote server. Although cloaked files will not upload or synchronize automatically, 
you may still upload them manually, if desired. Some people like to upload these 
items to keep a backup copy of them online. 


The cloaking process begins in the Site Setup dialog. 
1 Choose Site > Manage Sites. 
Select lesson11 in the site list, and click the Edit icon. 


Expand the Advanced Settings category and select the Cloaking category. 


> Ww N 


Select the Enable Cloaking and Cloak Files Ending With options, if necessary. 


The field below the checkboxes is already populated with a variety of extensions. 
The actual extensions you see may differ from those pictured. 
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5 Insert the cursor after the last extension, and insert a space, if necessary. 
Type .docx .csv .xlsx in the field. 


_ ___ Site Setup for lessont1 
Site ne, Te 

one Cloaking lets you exclude specified folders and files from all site operations. 

/> CSS Preprocessors 


'¥ Advanced Settings £2 Enable Cloaking 


i Local Info 

j memsieas &8 Cloak files ending with: 

ie EGloaking : = 
Design Notes «psd .less .sass .scss .map .doc .txt .rtf .docx .csv xisx | 
File View Columns k 


Be sure to insert a space between each extension. By specifying the extensions 
of file types that don’t contain desired web content, you prevent Dreamweaver 
from automatically uploading and synchronizing these file types no matter 
where they appear in the site. 


Click Save. If Dreamweaver prompts you to update the cache, click OK. 
Then, click Done to close the Manage Sites dialog. 


Although you have cloaked several file types automatically, you can also cloak 
specific files or folders manually from the Files panel. 


Open the Files panel. / 


In the site list, you will see a list of the files and félders that make up the site. 
Some of the folders are used to store the raw materials for building content. 
There’s no need to upload these items to the web. The Templates folder is not 
needed on the remote site, because your webpages do not reference these assets 
in any way. If you work in a team environment, it may be handy to upload and 
synchronize these folders so that each team member has up-to-date versions of 
each on their own computers. For this exercise, let’s assume you work alone. 


Right-click the Templates folder. 
From the context menu, choose Cloaking > Cloak. 


In the warning dialog that appears, click OK. 


Files CC Libraries Insert CSS Designer { | | Files CC Libraries tnzest CSS Designer & 
2 © Blessoni1 ~ Local view ~ £& : fi i ig @ lessonii Y Local view YO 3 $fta Hale 
t PD p 
Local Files Local Files T | 
} | 
oe Site - lesson11 (NewRoad:MacProjects:Peachpit: DWCC2020:wet Je v EB Site - lessoni1 (NewRoad}MacProjects:Peachpitt DWCC2020:webs:DWC.., 
</> tours.huenl al <> tours.htm! 
 ~ & Templax Ne ss Fil eae saa : - £3 Templates 
- </> ~ favor en hee ¥ — favorite-temp.dwt 
| New Folder : 
> resource > Ea rources 
Open 
> Js ” > © js 
Open With 
> images f > images 
Edit 
EA finished, finished 
ken {3 favee was 


Site-Specific Code Hints... 
Synchronize... 


Cloaking terplate or library files will only affect put or get commands, not 
any batch site operation. 


— Cloak 


Incioa ~ Unlock 

Uncloak All Locate on Remote Server "UPTO OR A REOPEN EEE OPEL SERENE BELA CE OPIS REO 
v Enable Cloaking Open in Browser > i 

Settinas Check | inks > 


® Note: Add any 
extension you may be 
using within your own 
source files. 


© Note: It should be 
mentioned that any 
resource uploaded 

to the server can be 
accessed by search 
engines and by the 
public. Sensitive mate- 
rial or content should 
not be uploaded if you 
are concerned that it 
may be seen by the 
public. 
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The selected folder shows a red slash, indicating that it is now cloaked. 


Using the Site Setup dialog and the Cloaking context menu, you cloaked file types, 
folders, and files. The synchronization process will ignore cloaked items and will 


not automatically upload or download them. 


Wrapping things up 


Over the last 10 lessons, you have learned how to use Dreamweaver and built an 
entire website, beginning with a starter layout and then adding text, images, and 
navigational content, but a few loose strings remain for you to tie up. Before you 
publish your site, you'll need to create one important webpage and make some 
crucial updates to your site navigation. 


The file you need to create is one that is essential to every site: a home page. The 
home page is usually the first page most users see on your site. It is the page that 
loads automatically when a user enters your site’s domain name into the browser 
window. That means when a visitor enters favoritecitytour.com into the browser's 
URL field and presses Enter/Return, the home page will appear even if you don’t 
know its actual name. Since the page loads automatically, there are a few restric- 
tions on the name and extension you can use. 


Basically, the name and extension depend on the hosting server and the type of 
applications running on the home page, if any. Today, the majority of home pages 
will simply be named index. But default, start, and iisstart are also used. 


Extensions identify the specific types of programming languages used within a 
page. A normal HTML home page will use an extension of .htm or .html. Exten- 
sions like .asp, .cfm, and .php, among others, are required if the home page con- 
tains any dynamic applications specific to that server model. However, you may still 
use one of these extensions—if they are compatible with your server model—even 
if the page contains no dynamic applications or content. But be careful—in some 
instances, using the wrong extension may prevent the page from loading altogether. 
Check with your server administrator or IT manager for the proper extension. 


The specific home page name or names honored by the server are normally config- 
ured by the server administrator and can be changed, if desired. Most servers are 
configured to honor several names and a variety of extensions. Check with your 
IS/IT manager or web-server support team to ascertain the recommended name 


and extension for your home page. In the upcoming exercise, you will use index for 
the name of the home page. 
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Creating ahome page 
In this exercise, you'll create a new home page and populate the content placeholders. 


1 Create a new page from the site template. 
Save the file as index.html or use a filename and extension compatible with 


your server model. 
2 Open home.html from the lesson11 site root folder in Design view. 


The file contains content for the text-based content section that appears below 
the image carousel. Since the file has no CSS styling, the display will look differ- 
ent than that of the Bootstrap layout, but it has an identical HTML structure. 


3 Insert the cursor in the heading WELCOME TO FAVORITE CITY TOUR. ® Note: Moving 


Select the div. container .mt3 tag selector and cut the content. content from one file 
to another is easier in 
Design view or Code 
WELCOME TO FAVORITE CITY TOUR pounmiceeeiroctne 
es view in both the source 
and target documents. 


* index.html %* home.htm! 


Welcome to the #1 
amazing destinations throughout the TInite4 o* — 


body div » .container.mt-3 h2 


Properties 
Class (text-center v) B / -3 32 22 
Link - OB 


4 Switch to index.html, and select Design view. 
Select the heading ADD HEADLINE HERE in the text-based content placeholder. 


5 Select the div.container.mt3 tag selector. 


The selected placeholder structure matches the content you cut in step 3. 
6 Paste to replace the selection. 


* index.html* * home+htiml 
bootstrap~-4.3.1,j5 ¥ 


Source Code bootstrap-4.3.1.css favorite~styles.css jquery-3.3.1.min.js popper.min.js 
| war yant woul 


Waincontent 


WELCOME TO FAVORITE CITY TOUR 


Welcome to the #1 site for international travel. Established in 2000, Favorite City Tour has offered and 


sera WK 


AA UALARAA Fintan beniAl Ann Andialibian 4A amassing dantinntinan thenwabard tha linitad Otatan an 


© Note: Pasting to replace an element with another works only in Design view and Code view. 


The text-based content section placeholder in the new layout is replaced. 


ADOBE DREAMWEAVER CLASSROOM IN A BOOK (2020 RELEASE) 413 


7 Switch to home.html. 


8 Insert the cursor in the heading HERE ARE SOME OF OUR FAVORITE TOURS. 
Select the div.container.mt3 tag selector. 


* index.html ™* home.html 


HERE ARE SOME OF OUR FAVORITE TOURS 


i) > .container.mt-3 2 .text-center 


Properties 
<GF 


9 Cut the content. 


Div 1D 


The file home.html should be empty. 
10 Close home.html. Do not save the changes. 
The file index.html appears alone in the document window. 


11 In index.html select the heading ADD HEADLINE HERE in the card-based 
content section. 


12 Select the div.container.mt3 tag selector. 
Paste to replace the selection. 


x index.html 


Source Code bootstrap-4.3.1.css favorite-styles.css Jquery3.3.1.minjs popper.min.js bootstrap~4.3.1js 


That's why our motto isn't just something we say, it's something we live every day! 


BHERE ARE SOME OF OUR FAVORITE TOURS 


The text-based and card-based content section placeholders have been replaced. 
You don’t need the list-based section placeholders. Let’s delete them. 


13 Scroll down to the list-based section placeholders. 


14 Select the heading ADD HEADLINE HERE in the list-based content section. 
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15 Select the div.container.mt3 tag selector and press Backspace/Delete. 


eT TViOTe e Wel Wits @. 


Stanceeditabee oH container mt-3 he text-cents stance editable main Avrapper 


v Class container mt-3 ¥ B T 
Link 


Title 
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The list-based content section is deleted. The new home page is nearly finished. 
Let’s add some content to the image carousel. 


Completing the home page 


In this exercise you will finish the home page by adding images and text to the 

Bootstrap image carousel. In most cases, you'll find working with the image 
felis : / 

carousel easier in Code view. / 


1 Switch to Split view. 


The document window is divided into two parts. One shows Design view and 
the other Code view. The advantage of using Split view is that it is easier to find 
components within the code. 


2 In Design view, scroll up to the image carousel and click one of the image 
placeholders. 


h 


<div class="carousel-inner"> 
<div class="carousel-item active"> <img class="d-block w-100" src="images/1920x500.gif" alt="First slide"> 
¥ <div class="carousel-caption d-none d-md-block"> 


By selecting an element in Design view, the code structure of that element is 
highlighted automatically in Code view. 


The highlighted code belongs to one of the image placeholders, but it may 

not be the first one. Examine the highlighted code and locate the first image 
placeholder in the carousel structure. The first placeholder can be found around 
line 51. 
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3 Select the code 1920x500. gif and type fl 


As you type, Dreamweaver provides hinting to complete the name of the 


image source. 


4 Select florence-tour-carousel. jpg from the hinting menu. 


src="images/fl" alt="First slide"> 
-images/florence-tour-carousel.j jpg 
images/florence-tour.jpg 


src="images/1920x500.gif" alt="First slide" ic="images/florence-tourfcarousel.jpg alt 


1920 * 500 pixels 


If you position the cursor over the filename in Code view, a preview image 


pops up. 

@ Note: If this were 5 Below the image source reference, select the text Item 1 Heading and type 
a real website, you Dreams of Florence to replace it. 

would also add alt and 

title attributes to each 6 Select the text Item 1 Description and type 

image. This tour is no fantasy. Come live the dream. 


7 Use the following content in the carousel for Item 2: 
Item 2 placeholder: greek-cruise-carousel.jpg 
Item 2 heading: Cruise the Isles 
Item 2 description: Warm waters. Endless Summer. What else do 
you want? 


8 Use the following content in the carousel for Item 3: 
Item 3 placeholder: rome-tour-carousel. jpg 
Item 3 heading: Roman Holiday 
Item 3 description: All roads lead to Rome. Time to find out why. 


<div class=" ‘carousel-i -item"> <img 9 clase='d- block w- 100" src= "images/areek-c cruise- “carousel pg” alte"Second slide" > 
<div class="carousel-caption d-none d-md-block"> 
<h5>Cruise the Isles</h5> has 
<p>Warm waters. Endless Summer. What else do you want? 
</div> 1920 x 500 pixels 


Sais SSRN, _treneRRMNNRERRNNRRINS 
<div class="carousel-item"> <img class="d-block w-100" src="images/rome-tour-carousel.Jog" alt="Third slide"> 
<div class="carousel-caption d-none d-md-block"> 
<h5>Roman Holiday</h5> 
<p>All roads lead to Rome. Time to find out why.</p> 
</div> 
</div> 


dv op @ HTML > 939x232 ~ INS 66:21 {sp 
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9 Switch to Live view. 


Grecian Dreams i Florida Sunshine : Athenian Gold 
The warm placid waters of the i Have you had your dose of : Greece was the cradle of 
Aegean are calling you. Come i sunshine today? Jacksonville i western civilization. Let us show 


cas the Graal iclac far the firct will curnrica at hamea minh marca wnis cide af it vaniva never 


The home page is nearly complete. The title and meta description place- 
holders still need to be updated. 


10 In the Property inspector, select the placeholder text Insert Title Here and 
type Welcome to travel with a difference 


11 Switch to Code view, select the text add descriptjon here (around line 15), 
and type Welcome to the home of travel witha difference 


12 Save and close all files. 


These changes should be good enough for now. Let’s assume you want to upload 
the site at its current state of completion. This happens in the course of any site 
development. Pages are added, updated, and deleted over time; missing pages will 
be completed and then uploaded at a later date. Before you can upload the site 

to a live server, you should always check for and update any out-of-date links and 
remove dead ones. 


Prelaunch checklist 


Take this opportunity to review all your site pages before publishing them to see 
whether they are ready for prime time. In an actual workflow, you should perform 
the following actions, which you learned in previous lessons, before uploading a 

single page: 

e Spell-check (Lesson 8, “Working with Text, Lists, and Tables”) 

e Sitewide link check (Lesson 10, “Working with Navigation’) 


Fix any problems you find, and then proceed to the next exercise. 
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Putting your site online (optional) 


@ Note: This exercise For the most part, the local site and the remote site are mirror images, containing 
is optional, since it the same HTML files, images, and assets in identical folder structures. When you 
are transfer a webpage from your local site to your remote site, you are publishing, 
beforehand. or putting, that page. If you put a file stored in a folder on your local site, Dream- 


weaver transfers the file to the equivalent folder on the remote site. It will even 
automatically create the remote folder or folders if they do not already exist. The 
same is true when you download files. 


Using Dreamweaver, you can publish anything—from one file to a complete site— 
in a single operation. When you publish a webpage, by default Dreamweaver asks if 
you would also like to put the dependent files too. Dependent files are the images, 
CSS, HTML5 movies, JavaScript files, server-side includes (SSI), and other files 
necessary to complete the page. 


You can upload one file at a time or the entire site at once. In this exercise, you will 
upload one webpage and its dependent files. 


1 Open the Files panel and click the Expand icon J, if necessary. 


» 2 
Files CC Libraries Inset CSS Desiqner = Dade e : Files : 
& © Gilessoni Y  Localview » | ‘= © Blessont1 ~ Remote server» p% [Ez $fro & ): 
ae! ‘ Sear i 
“~K tt oo a 
p so ; Remote Server T i Local Files T 
Local Fs Expar | Click here | 3 Site - lesson11 (NewRoad:MacProjects:... 
~ £3 Site - lessonl11 (NewRoad:MacProject... | <P tours.htmt RO 
SESS tourshimlc ss SS |  » B3 Templates 
i BS Templates / | $ favorite-temp.dwt 
¥ — favorite-temp.dwt | > © resources 
> 3 resources | > & js 
> B js </> index2.htmi 
</> index2.htmi </> index.htm! 
</> index.htmi | > © images 
> ED images </> home.html 


<> home.htm! | finished 
LYS ink 
1 local items selected totalling 11918 bytes 


&3 finished e & 


Cie, 1 local items selected totalli 


© Note: The Expand icon will appear only when a Remote server is defined in the site. 


The files panel expands to take up the entire interface in Windows. In the 
macOS the files panel pops up as a floating window. The window is divided in 
half, showing the local site on the right. The left side will show the remote site 
once you connect to the hosting server. 
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2 Click the Connect To Remote Server icon “ to connect to the remote site. 


ese 
= © ES tessonil 
ye) 


Remote Server T 


Files 


v 


Click here 1 =3 Site ~ lesson 
Sey Rcserpem ert 


5723 favorite-temp.dwt 


>& 

'>o8 

| <p> 

| <p 

> 6 

<p> 

& 

j n 

Cc & __1 local items selected totalling 11918 bytes. 


Y Remote server * aa $f 


| Local Files 


Templates 
resources. 
Js 

index2. html 
index. htmi 
images 

home. html 
finished 


Files 


182 } Giessonir ™ 


css {he ai? 
favicon.ico ‘ 
img i 
index.htmt { 
test i 


> & 
> 
<p> 


| $ fy 
1¢ & 1 local items sefected totalling 11918 bytes. 


If your remote site is properly configured, the Files panel will connect to the 


pa 
Remote server » E 


} Local Files t 


~ 3 Site - lesson] (NewRoad:MacPr 


Seams 


Templates j 
5263 favorite-temp.dwt 

resources 

js 

index2.html 

index.html 

images 

home. btm! 

finished 


on pis 


site and display its contents on the left half of the panel. When you first upload 


files, the remote site may be empty or mostly empty. If you are connecting to 


your internet host, specific files and folders created by the hosting company 


may appear. Do not delete these items unless you check to see whether they are 


essential to the operation of the server or your own applications. 


3 Inthe local file list, select index.html. 


/ 


4 


4 Inthe Files panel toolbar, click the Put icon *. 


@ Warning: Dreamweaver does a good job trying to identify all the dependent files in a par- 


ticular workflow. But in some cases, it may miss files that are crucial to a dynamic or extended 
process. It is imperative that you do your homework to identify these files and make sure they 


are uploaded. 


5 By default, Dreamweaver will prompt you to upload dependent files. If a depen- 


dent file already exists on the server and your changes did not affect it, you 


can click No. Otherwise, for new files or files that have had any changes, click 


Yes. There is an option within Preferences where you can disable this prompt, 


if desired. 


eee 
ed ® Biessoni1 
yo 


Remote Server F 


Files 


> cgi-bin 
> 


] Local Files t 


aa i SES eG v Site ~ lesson11 (NewRoad:MacProje... 
o 


<P tours.himi 


-~ Remote server» | FH 2 & S Al) 
d h ae 


B cs “A S&S Templates 
B favicon.ico 73 favorite-temp.dwt 
>a ima > (resources 
<P index.html > @ js 
> B test ee indechend 2S 
> 3 images 
| <)> home.htm! 
6 Click Yes. 


Se @ Blessoni1 ¥ 
Pp 


Remote server ~ 


Remote 
> @ Should dependent files be inctuded in the transfer? 


| 


(J Don't show me this message again 


ga 


@ Note: Dependent 
files include, but are 
not limited to, images, 
style sheets, and 
JavaScript used within 
a specific page and are 
essential to the proper 
display and function of 
the page. 


Dependent Files - will dismiss in 21 second(s) 


roje,.. 


Dreamweaver uploads index.html and all images, CSS, JavaScript, and other 
dependent files needed to properly render the selected HTML file. Although 
you chose only one file to put, you can see that 16 files and three folders were 


uploaded. 
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@ee 
gS ® Slessonii 
PP 


Remote Server T 


> (cgi-bin 
> GD css 
{) favicon.ico 
{}  favorite-styles.css 
> ©) images 
> © img 


® Note: A file that is 
uploaded or down- 
loaded will auto- 
matically overwrite any 
version of the file at the 
destination. 


The Files panel enables you to upload multiple files as well as the entire site 


at once. 


Select the site root folder for the local site and then click the Put icon @ inthe 


Files panel. 


Files 
Y Remote severe Cf Fi g & S Acard a } Blessonis - Remote server ¥ 
eaoeees LY hon : 
p 
i Local Files “Remote Server tT j Local Files T 
|» BB Site - lessonld (NewRoadiMacProje... = 


<P tours.hemi ; > & cgi-bin 
~ PS Templates > es. 3 : 
$3 favorive-temp.dwt {S favicon, [Dw] Are you sure you wish to put the entire site? \p.dwet 
> ©) resources {}  favorixe : 
> & js > © images 
<> index.htm! Pe ic). Raat 


Dialogs appear, asking you to confirm that you want to upload the entire site. 
Click Yes or OK as appropriate. 


Dreamweaver begins to upload the site. It will re-create your local site structure 
on the remote server. Dreamweaver uploads pages in the background so that 
you can continue to work in the meantime. If you want to see the progress of 
the upload. Dreamweaver provides an option for that. 


Click the File Activity icon & in the lower-left corner of the Files panel. 


> Tip: You may need to click the Details option to see the entire report. 


@8®@ Background File Activity - lesson11 - favoritecitytour.... 


File activity complete. 


! Details j 


events.html - Transferring 
contact-us.html - Put operation successful 
tours. html ~ Transferring 

about-us.html - Put operation successful 
tours.html - Put operation successful 
events.html - Put operation successful 


File activity complete. 
Files updated: 39 
Files skipped: 16 


Finished: 11/13/19 1:14 AM 


3! 


CC Savetog.. )C Hide )(C Close) | 


7 


When you click the File Activity icon, the Background File Activity dialog 
appears displaying a list featuring the filenames and the status of the selected 


operation. You can even save the report to a text file, if desired, by clicking the 
Save Log button. 


Note that neither the cloaked lesson folders nor the files stored within them 
were uploaded. Dreamweaver will automatically ignore all cloaked items when 


putting individual folders or an entire site. If desired, you can manually select 
and upload individually cloaked items. 
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10 Right-click the Templates folder and choose Put from the context menu. 


Dreamweaver prompts you to upload dependent files for the Templates folder. 


11 Click Yes to upload dependent files. 


gait a 
oo Files Remote Server T 
: * Select » ene mayen 
= © Biessonit ¥ Remote server~ | ge FE > imo 
© ey Compile i! </> index.hemt 
a F > & js 
Remote Server Locai Files F ot s >a ee 
wilt iv ite = 4 
Malet 5 | &3 Site-tessonil Get > ZH Templates 
</> about-us.huml i <P tours.htm! > C3 test 
> ect |» Temas gS <b sous 
<> comact-us.hem! | MH tavorire i ce 


The Templates folder is uploaded to the remote server. The log report shows 
that Dreamweaver checked for dependent files but did not upload the files that 


had not changed. 


Note that the remote Templates folder displays a red slash, indicating that 


it, too, is cloaked. At times, you will want to cloak local and remote files and 
folders to prevent these items from being replaced or accidentally overwritten. 
A cloaked file will not be uploaded or downloaded automatically. But you can 


manually select any specific files and perform the same action. 


The opposite of the Put command is Get, which dgwnloads any selected file or 
folder to the local site. You can get any file from the remote site by selecting it in 
the Remote pane and clicking the Get icon. Alternatively, you can drag the file 


from the Remote pane to the Local pane. 


12 If you were able to successfully upload your site, use a browser to connect to 
the remote site on your network server or the Internet. Type the appropri- 
ate address in the URL field. The exact entry will depend on whether you are 
connecting to the local web server or to the actual internet site—and may look 


something like: 
http://localhost/domain-name or http://www.domain-name.com. 


@ Chrome file Edit View History Bookmarks People Window Help 


< 


I] Welcome to travel with adiffe x + 


@ @ NotSecure  favoritecitytour.com xy OF PF 


GO % F + 4) woxee B 


Wed’ 


° 


eu 


WELCOME TO FAVORITE CITY TOUR 


Welcome to the #1 site for international travel. Established in 2000, Favorite City Tour has offered and developed unique travel 
opportunities to amazing destinations throughout the United States as well as around the world. 


Our tour leaders are a cut above the others. Each one specializes in the city or reaion where they reside and often have arown 


The Favorite City Tour site appears in the browser. 


~ 3 Site ~ lessonit (NewRoad:MacProje 
</> tours.hemt 
\ 3 Templates | 
favorite-temp.dva | 
| 
| 
} 


<> index.htet 
ene 


© Note: When access- 
ing Put and Get, it 
doesn’t matter whether 
you use the Local or 
Remote pane of the 
Files panel. Put always 
uploads to Remote; 
Get always downloads 
to Local. 


® Tip: If you are using 
a third-party web- 
hosting service, be 
aware that they often 
create placeholder 
pages on your domain. 
If your home page 
does not automatically 
appear when you access 
your site, you may need 
to delete the place- 
holder page. 
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13 Click to test the hyperlinks in the horizontal menu to view each of the com- 
pleted pages for the site. 

Once the site is uploaded, keeping it up to date is an easy task. As files change, 

you can upload them one at a time or synchronize the whole site with the 

remote server. 

Synchronization is especially important in workgroup environments where files are 

changed and uploaded by several individuals. You can easily download or upload 


files that are older, overwriting files that are newer in the process. Synchronization 
can ensure that you are working with only the latest versions of each file. 


Synchronizing local and remote sites 


Synchronization in Dreamweaver keeps the files on your server and your local 
computer up to date. It’s an essential tool when you work from multiple locations 
or with one or more co-workers. Used properly, it can prevent you from acciden- 
tally uploading or working on out-of-date files. 


At the moment, your local and remote sites should be very similar if not identical. 
Remember that there may be some placeholder files in the server created by your 
hosting service. To better illustrate the capabilities of synchronization, let’s make a 
change to one of the site pages. 


When the Files panel is expanded, the Expand icon becomes the Collapse icon. 
1 Collapse the Files panel by clicking the Collapse icon ], if necessary. 


Clicking the collapse button re-docks the panel on the right side of the program, 
if necessary. 


2 Open about-us.html in Live view. 


3 In the CSS Designer, click the All button. 


Files CC libraries insert CSS Designer 
 ciner Select favorite-styles.css. 

+ — Sources: favorite-styles.. + Properties Create a new selector: - fcname 

bootstrap-4.3.1. Read Onl eup Ee : : 

eres sts eo) | fl stows 4 Add the following properties to the new rule: 
favorite-styles.css : (F] text 

Tex! e 
+ @Media: GLOBAL colors cee 
vee me font-weight: bold 

GLOBAL font-weight :; bold 18 2 

+ = Sel 
3 Set ay 5 In the first paragraph of the text content, 

Filter OSS Rutes MOre 

came select the first occurrence of the text Favorite 
tr oe City Tour. 

fcamessss se 

All Mode: Lists rules for entire document 
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6 Select .fcname from the Class dropdown menu in the Property inspector. 


th a Difference” is not just our 


Favorite City Tour we take travel seriousl) figure 


| 
| 
| 
I 
i 
t 
' 
| 
i 


ST AN Sots HRA A REN AY hon ante eR EON 
motinstance Heinstance body mumbinstance editable mais div .cor figure-img 
ero perties Loe Se en eae fixed-bottom 

Format Paragraph ~ Class fixed-top 
Ba css | ue ok flex-column 


None Y 


7 Apply the fcname class to each occurrence of the name Favorite City Tour any- 
where on the page where it appears in the text content. 


8 Save all files and close the page. 


9 Open and expand the Files panel. @ Note: The Synchro- 
In the Document toolbar, click the Synchronize icon ©. nize icon looks similar 
to the Refresh icon but 
The Synchronize With Remote Server dialog appears. is located on the upper- 
; . ; . right side of the Files 
10 From the Synchronize pop-up menu, choose the option Entire ‘lesson11’ Site. panel 
From the Direction dropdown menu, choose Get And Put Newer Files. 
one Files Ree ‘ 
SO Siessonrs Remote sever UC 8 + g 1B. SBS Siessonr ~ Remomsevery OR 8 & 1G 
He Ae : Seno | eee: Syngheonize wash Reme 
Remote Server T Local Files F Remote Server T i 
EB pconract Us font Y EB Site - tesson11 (NewRead:MacProjects:Peachpl... SR MNUSHE SymEhCOnIZE: Entire Nessanit’ Site ¥ EProjexts:Peach | 
[> craises. heen! Name | <P> heme : j 
>™ es Si remplacs > #5 images —_-Dieection: wv Put newer files to remone C i 
<P events nimi Aes) formar > B img Get newer files from remore i 
DB favicon.ico, Si Geo tasers <P index Ci petere rem Gat and Put newer files i 
{1} favorite-styles.css > @ 5 > : is ane 2 h, H 
> fini ; &  essour 
Re che we BE 
CS GB, Local items selected totalling 6714 bytes. CB, 1 locat iteris setected totalling 8724 bytes, 
11 Click Preview. ® Note: Synchronize 


does not compare 


The Synchronize dialog appears, reporting what files have changed or do not Boahed Rlecor faders 


exist on the remote or local site, and whether you need to get or put them. 


Since you just uploaded the entire site, the files you modified—about-us.html 
and favorite-styles.css—should appear in this list, which indicates that Dream- 
weaver wants to put them to the remote site. 


The dialog may also list a number of files that already exist on the remote 
server—placed there by your web-hosting company or service—that do not 
appear in the local site folder. These files, in most cases, will be needed only by 
the placeholder content itself. The content you created within Dreamweaver is 
completely self-sufficient and should not require these files and resources. Of 
course, I cannot guarantee that this is always the case. 


The Synchronize dialog has marked all the pre-existing files on the remote 
server with the action Get. If you click OK at this point, all these files will be 
downloaded to your local site. Since these files are not required to support your 
site, this would not be a good idea. You have two choices in that case: you can 
ignore the files or delete them altogether. 
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7 7. ‘ee OO ao Ge 4 *@ 


«9 @ o @@>s OeeF 


Synchronization options ee 


During synchronization, you can choose to accept the suggested action or override ' 
it by selecting one of the other options in the dialog. Options can be applied to one 
or more files at a time. 


$Y Get—Downloads the selected file(s) from the remote site. 

t Put—Uploads the selected file(s) to the remote site. 

Delete—Marks the selected file(s) for deletion. 

‘) Ignore—lgnores the selected file(s) during synchronization. 

C Synchronized—ldentifies the selected file(s) as already synchronized. 


ES Compare—Uses a third-party utility to compare the local and remote versions 
of a selected file. 


12 Mark any file on the remote site to be ignored © or for deletion [i] if you do 
not need them. 


36 @ Synchronize Sigs caraec eee i ees Pa 2 rape - — 
WES rites: 42 wit! be undated : HENRY ites: 2 will be updated, 40 will be deleted = 
o Seen S ae 
2 Fle Soca SEDC eee ee ___ Status fies Les eet ; : Action File : Status 
& favorite-styles.css i 3 eS q (te Put “ES favorite-styies.css- ENE Rae sone Teena el 
{8 abour-us.hemt | : i * Put —_fY_ about-us.hemi 
B col-binirest/tesr.cgt ; | | delete GB coi-bin/test/test.coi 5 You chose to delete thi... 
IB casistyle.css 13 Foro | B octets BY ess/styiecss, h You chose to delete thi. | | 
B favicon.ico | i ie ; {3 Detere BD) favicon.ico You chose to delete thi. «= eh 
{3} img/apps/container-box. gif i i |B vetere (3) img/anps/container-box.aif You chose to delete thi, | | 
: Pe Sct oe Bata Oe Ss x Ben: q } § Usmipes Sirs Seabee zs ese RRS Js 
+ (J show all files i ££) Show all files : 
& To char. “ction, select 2 file and click one of the icons below before clicking OX F Hf i To change an action, select a file and click ome of the icons below before clicking OX, 
aes i i > - 
TS ss . | — : ee 
Cc &, : i CS BH Local items selected totalling 6718 bytes. Ss 
@ Note: The files 13 Click OK to upload the two files and delete or ignore the others. 
shown in the screen 
shots are typical of the © © ®@ Background File Activity - lesson11 - favoritecitytour.com 


webhosting service | 

used. The files on your 
service may be totally a 
different. (Y) Details 


/test/python/tést. ntl — deleted 7 ae 
/test/python/test.py ~ deleted 

/test/ssi/test.html - deleted 

| /test/ssi/test.shtml - deleted 

| File activity complete. 
Files updated: 2 

Files deleted: 40 
Files skipped: 53 


File activity complete. 


Finished: 11/13/19 12:48 PM 


(‘Save Log...) (Hide +) Close ae) 
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The Background File Activity dialog appears and reports the progress of 
synchronizing the content of the local and remote sites. 


14 If necessary, click to close the Background File Activity dialog. 
In the Files panel, click the Collapse icon FJ to dock the panel again. 


If other people can access and update files on your site, remember to run synchro- 
nization before you work on any files to be certain you are working on the most 
current versions of each file in your site. Another technique is to set up the check- 
out/check-in functionality in the advanced options of the server setup dialog. 


In this lesson, you set up your site to connect to a remote server and uploaded files 
to that remote site. You also cloaked files and folders and then synchronized the 
local and remote sites. 


Congratulations! You've designed, developed, and built an entire website and 
uploaded it to your remote server. By cornpleting the exercises in this book to this 
point, you have gained experience in most aspects of the design and development 
of a standard website compatible with desktop computers. In the remaining online 
lessons, you will learn some productivity tricks with HTML and CSS code to adapt 
your content to the dynamic Bootstrap site framework so that it will work not only 


on desktop computers but also with cellphones, tablets, and other mobile devices. 
/ 
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Review questions 


What is a remote site? 
Name two types of file transfer protocols supported in Dreamweaver. 


How can you configure Dreamweaver so that it does not synchronize certain files in 
your local site with the remote site? 


True or false: You have to manually select and publish every file and associated image, 
JavaScript file, and server-side include that is linked to pages in your site. 


What service does synchronization perform? 


Review answers 


1 


A remote site is typically the live version of the local site stored on a web server 
connected to the internet. 


FTP (File Transfer Protocol) and Local/Network are the two most commonly used 
file transfer methods. Other file transfer methods supported in Dreamweaver include 
Secure FTP, WebDAV, and RDS. 


Cloaking the files or folders prevents them from synchronizing. 


False. Dreamweaver can automatically transfer dependent files, if desired, including 
embedded or referenced images, CSS style sheets, and other linked content, although 
some files may be missed. 


Synchronization automatically scans local and remote sites, comparing files on both to 
identify the most current version of each. It creates a report window to suggest which 
files to get or put to bring both sites up to date, and then it will perform the update. 
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APPENDIX 


TinyURLs 


PAGE TINYURL 


Lesson 4 


FULL URL 


129 tinyurl.com/shorten-CSS 


Lesson 5 


145 https://tinyurl.com/adobe-generate 


Lesson 9 
310 https://tinyurl.com/pew-broadband-report 


Lesson 11 


https://developer.mozilla.org/en-US/docs/Web/CSS/ 
Shorthand_properties 


https://blogs.adobe.com/photoshop/2013/09/ 
introducing-adobe-generator-for-photoshop-cc.html 


www.pewresearch.org/internet/fact-sheet/internet-broadband/ 


409 http://tinyurl.com/setup-coldfusion 


www.adobe.com/devnet/archive/dreamweaver/articles/ 
setup_cfhtml?PID=4166869 


409 http://tinyurl.com/setup-apachephp 
409 http://tinyurl.com/setup-asp 
Lesson 13 


online http://tinyurl.com/fluid-width-animation 


www.adobe.com/devnet/archive/dreamweaver/articles/ 
setup_php.html?PID=4 166869 


www.adobe.com/devnet/archive/dreamweaver/articles/ 
setup_asp.html?PID=4166869 


https://css-tricks.com/NetMag/FluidWidthVideo/ 
Article-FluidWidthVideo.php 


online http://tinyurl.com/video-HTML5-1 www.w3schools.com/html/html5_video.asp 

online http://tinyurl.com/video-HTML5-2 www.808.dk/?code-html-5-video 

online http://tinyurl.com/video-HTML5-3 www.htmligoodies.com/html5/client/how-to-embed-video- 
using-htm!5.html 

online http://tinyurl.com/fluid-video https://ulrich.pogson.ch/complete-responsive-videos-breakdown 

online http://tinyurl.com/fluid-video-1 https://css-tricks.com/NetMag/FluidWidthVideo/ 
Article-FluidWidthVideo.php 

online http://tinyurl.com/do-not-host-video www.wp101.com/10-reasons-why-you-should-never- 
host-your-own-videos/ 

online http://tinyurl.com/video-hosting-overview —www.koozai.com/blog/social-media/video-marketing/ 


video-distribution-vs-self-hosting-videos/ 
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INDEX 


A 
<a> tag (hyperlink), 47, 57, 360 
Absolute hyperlinks, 361, 376-380 
Access model, web design, 136-137 
Add a New Row icon, 257 
Add Class/ID icon 
Bootstrap layout modification, 212 
creating new items based on 
lists, 272 
destination link in Element 
Display, 391 
duplicating Bootstrap rows, 258 
images added to mobile 
design, 336 
importing text, 255 
inserting new menu items, 
171-172 
internal targeted link creation, 389 
Add CSS Source icon, 158-159 
Add Element icon, 173, 226-228, 229 
Add Selector icon, 160, 178, 182, 215, 
351, 373, 386 
address element 
adding template boilerplate/ 
placeholders, 216-218 
Bootstrap layout modification, 
211-213 
Bootstrap text format 
modification, 214-215 
Adobe Generator, web design 
and, 145 
All button, CSS Designer, 44, 125 
Alpha transparency, 309, 311 
Alt text, 315 
Analytics, web design and, 137 
Anchor elements 
content targeting with, 386 
destination links with, 390 
function of, 360 
Apply Comment icon, 76—77 
Apply HTML Comment, 76-77 
<article> element, 60-61, 115 
Assets, Code view preview, 100-102 
Assets panel 
image insertion in, 333-334 
list creation in, 260 
populating, 333 
text imported in, 252—253 


INDEX 


Attributes, CSS 
class, 129-130 
deleting from template, 167—170 
home page images, 416 
id, 130-131 
Audience 
mobile web design for, 143 
web design for, 136 
Auto compilation, CSS 
preprocessor, 79 


B 
Background color 
background image added to 
header, 192-196 
finishing up layout, 198 
gradient backgrounds created 
with Extract, 180-185 
styling elements with Extract 
panel, 155-162 
text styled using Extract, 176 
troubleshooting CSS conflicts, 163 
Berners-Lee, Tim, 54-55 
Bit depth, 308 
Block elements, HTML, 56 
<body> tag, 56, 57, 68 
Boilerplate, adding template, 216-218 
Bootstrap 
adding images to carousels, 
348-351 
creating new structures, 187-191 
deleting unused components, 
258-259 
duplicating rows, 256-258 
heading/text styling in carousels, 
351-352 
image responsiveness and, 
334-337 
inserting new element, 225-228 
layout modification, 209-213 
link appearance in, 368 
templates, 152 
templates, troubleshooting CSS 
conflicts, 163 
text format modification, 214—215 
text styled using Extract, 177 
warning message, 159 


Borders 
styling table cells, 282-283 
table creation, 275 
table display, 285 
tables inserted from other 
sources, 287-288 
Box model, CSS, 112-113 
Browsers 
CSS formatting vs. HTML, 111 
destination status bar, 363 
search phrase placement, 378 
web design and, 137 


C 
Captions, formatting table, 291-293 
Caret (*) symbol, writing code 
automatically, 73 
Cascade theory, styling CSS, 114-116 
Cascading style sheets. See CSS 
(cascading style sheets) 
Cells, styling table, 282-283 
Child pages 
adding content, 235-237 
adding metadata, 237-238 
creating, 202 
creating new page, 233-235 
editable regions and, 225 
inserting editable region, 228-230 
inserting images, 352-354 
inserting new Bootstrap element, 
225-228 
overview of, 233 
removing optional region, 
243-244 
removing unused section, 
244-245 
updates, 239-242 
updating links, 374-376 
Class attributes, CSS 
added to templates, 345-348 
creating, 129-130 
descendant theory and, 102 
writing code automatically, 72-73 
Classes, CSS 
added to templates, 345-348 
inserting table from other source, 
289-291 
pseudo-classes, 371, 395 
table display, 284-286 


Code 
collapsing, 98—99 
comments added to, 76-77 
Common toolbar 
customization, 75 
creating HTML, 66-73 
with CSS preprocessors. See CSS 
preprocessors 
expanding, 99 
lesson overview, 64-65 
linting support, 93-94 
multicursor support, 74-75 
review Q & A, 103 
selecting, 95-98 
Split Code view access, 99-100 
Code hinting, 68-69 
Code Navigator 
CSS Designer vs., 123, 126-127 
styling CSS with, 119-123 
Code view 
accessing, 24—25 
asset preview in, 100-102 
displaying in Split view, 26-27 
new dark color scheme of, 23 
some tools only active in, 35 
in workspace, 18 
workspace customization, 
107-108 
Coding toolbar. See Common toolbar 
Collapsing code, 98-99 
Color 
background. See Background 
color 
interface preferences for, 23-24 
palette for images, 308-309 
Columns 
controlling table display, 284—286 
inserting tables from other 
sources, 289-291 
Comments, code, 76-77, 267 
Common toolbar, 35, 75, 97-98 
Compiler, CSS code, 84-88 
Components 
deleting unused Bootstrap, 
258-259 
removing unneeded template, 
167-170, 203-209 
removing unused child page, 
244-245 
webpage design, 140-143 
Compression, image, 310-311, 323 
COMPUTED option, CSS Designer, 
43, 126-127 
Connections, troubleshooting 
FTP, 408 


Content 
formatting separated from 
web, 113 
mobile device, 143 
structure based on list, 266-270 
Copy and Paste 
creating menu items with, 
174-176 
extracting text with, 178-179 
Find and Replace in tables with, 
300-302 
styling in CSS Designer with, 
41-42 
tables, 279-280 
Creative Cloud server, 153-155, 329 
Cropping images, 319 
CSS (cascading style sheets) 
class attribute creation, 129-130 
CSS box model, 112-113 
CSS3 features and effects, 
131-132 
CSS3 overview and support, 132 
formatting multiple elements, 128 
HTML defaults, 108-111 
HTML vs. CSS formatting, 
106-108 y 
id attribute creation, 130-131 
lesson overview, 104—105 
review Q&A, 133 
shorthand, 129 
styling tables, 280-281 
understanding, 106 
CSS classes 
added to templates, 345-348 
inserting table from other source, 
289-291 
pseudo-classes, 371, 395 
table display, 284—286 
CSS Designer 
<a> tag, 370, 371 
Bootstrap layout modification, 
209-213 
creating new items based on 
lists, 272 
element styling with Extract, 
156-162 
gradient backgrounds created 
with Extract, 180-185 
link creation, 370, 373 
Live view connected to, 26 
overview of, 123-128 
table styling, 280-281 
text styled using Extract, 176-179 
troubleshooting CSS conflicts, 
162-164 
workspace customization, 41—45 


CSS preprocessors 
creating CSS source file, 81-84 
CSS code compilation, 84-88 
enabling, 78-81 
importing other styling sheets, 
91-92 
learning more, 93 
nesting CSS selectors, 89-91 
overview of, 77 
CSS, styling 
cascade theory, 114-116 
Code Navigator, 119-123 
CSS Designer, 123-128 
descendant theory, 117 
inheritance theory, 116 
overview of, 113-114 
rule syntax, 115 
saving changes, 375 
specificity theory, 117-118 
troubleshooting conflicts, 
162-164 
CSS tab, Property inspector, 38 
Ctrl/Cmd key, 74-75, 250 
Current button, CSS Designer 
element styling with Extract, 
158-159 
gradient background using 
Extract, 180 
overview of, 44 
text styling using Extract, 176-177 
troubleshooting CSS conflicts, 162 
working with, 125-126 
Customer demographics, web 
design, 137 
Customization 
Common toolbar, 75 
keyboard shortcuts, 35 
workspace. See Workspace 
customization 


D 
Dark theme, interface preferences, 
23-24 
Data 
adding tables, 276 
tables from other sources of, 
286-288 
Declarations, CSS rules, 113-114 
Defaults, HTML, 108-110 
Dependent files, 419 
Descendant theory, styling CSS, 117 
Description, metadata for page 
creating lists, 260 
importing text and, 253-254 
inserting, 221—222 
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Design view 


adding table data, 276 

Code view displayed in, 26-27 

content movement in, 413 

copying and pasting tables, 
279-280 

cropping and resizing, 318-322 

CSS box model in, 113 

image insertion in, 316-317 

link creation in, 367, 372 

spell-checking webpages, 293-295 

tables inserted from other 
sources, 286-288 

telephone links in, 399 

template insertions in, 341-342 

workspace customization and, 25 


Desktop, web design, 143-144 
Destination links, 390-393 
Developer workspace, 29, 66-69 
Display 


controlling table, 284-288 
Element. See Element Display 
Image Display, 47 

Text. See Text Display 


Dithering, 308 
div.container tag selector 


adding header background 
image, 196 

basing content structure on lists, 
267-268 

deleting unused Bootstrap 
components, 259 

new items on lists, 271-272 

removing unused child page 
sections, 244. 

unordered lists, 266 


Document toolbar, 35 
DOM (Document Object Model), 


examining with Dom Viewer, 45 


DOM panel 


adding classes in, 345 

Bootstrap layout modification, 211 

defined, 172 

editable regions in, 229 

navigation menu edits via, 393 

new Bootstrap elements in, 227 

new menu items in, 172-174 

optional editable regions in, 
231-233 

template semantic errors fixed in, 
219-221 

text imported in, 253-254 

unneeded template components 
removed in, 207-209 

unordered lists in, 264 


INDEX 


DOM Viewer, 45 

Drop zone, custom panel groups, 33 

Duplicate Column icon, list-based 
items, 270-273 

Duplicate Row icon, Bootstrap, 258 

Duplicate sets, 35 

.dwt file extension, Dreamweaver 
template, 232—233 


E 
Editable regions, templates 
card-based section, 224 
defined, 203 
image carousel, 224 
importing text and, 253-254 
inserting, 228—230 
inserting new Bootstrap element, 
225-228 
inserting optional, 231-233 
list-based section, 225 
overview of, 224 
Effects, CSS3, 131-132 
Element dialogs, workspace, 46—47 
Element Display 
accessing table properties, 38 
adding classes via, 345-348 
destination links via, 390-393 
image-based links via, 383-384 
overview of, 46 
Elements 
creating new with DOM panel, 
172-174 
defined, 55 
deleting from template, 167-170 
frequently used, 56 
inserting new menu items, 
172-174 
pasting multiple, 270 
tag selector for styling/editing, 
40-41 
<em> tag (italics), 32, 42 
Email 
default program for, 383 
forwarding web-based, 364. 
hyperlink styling, 385-386 
links, 381-383, 387 
spam prevention, 387 
Embedded styling, CSS, 113, 116 
Emmet, 69-73, 83-84 
Entities, HTML character, 58-59 
Error checking, live code, 93-94 
Expanding code, 99 
External Files, Related Files 
interface, 39 
External hyperlinks, 360, 376-380 


Extract panel 

gradient backgrounds in, 180-185 

new Bootstrap structures in, 
190-191 

styling elements in, 155-162 

styling predefined templates in, 
153-155 

text extracted from Photoshop 
mockups in, 164-167 

text styling in, 176-179 


F 
Features, CSS3, 131-132 
File Transfer Protocol (FTP) 
defined, 404 
site setup, 405-410 
Files 


dependent, 419 
opening consecutive/ 
non-consecutive, 250 


Files panel, 250 
Find and Replace panel, text, 295-302 
Floating panels, 32-33, 34 
<footer> element, 60-61, 100, 197 
Formatting, CSS 
applying. See CSS, styling 
box model and, 112-113 
browser antics, 111 
HTML defaults, 108-110 
HTML vs. CSS, 106-108 
non-web images, 322-325 
raster images, 310-311 
separating from web content, 113 
FTP (File Transfer Protocol) 
defined, 404 
site setup, 405-410 


G 
GIF (Graphics Interchange 
Format), 310 
Git version control, 47—49 
Graphics. See also Images 
Dreamweaver tools, 355 
raster, 306-311 
vector, 306 
Graphics Interchange Format 
(GIF), 310 
Groups, closing panel, 31-32 


H 
Header 
adding rows to tables, 283-284 
background image added to, 
192-196 


Bootstrap styling for, 351-352 
formatting, 394 


image assets extracted from 
mockups in, 185-187 
new Bootstrap structures in, 
187-191 
writing code automatically for, 
71-72 
<header> element, 60-61, 100, 185, 
187, 192, 370 
Hierarchy, CSS rule, 118 
High color, 309 
Hinting menu, navigation, 349 
Home links, 369-374 
Home pages, 412-417 
HTML, creating code 
code structure, 56 
overview of, 66 
review Q & A, 62-63 
writing automatically, 69-73 
writing manually, 66-69 
HTML editor, Dreamweaver, 18 
HTML (HyperText Markup 
Language) 
character entities, 58-59 
checking for valid, 399 
code structure, 56 
formatting CSS vs., 106-108 
frequently used tags, 56-58 
home pages, 412 
lesson overview, 52-53 
lists. See Lists 
new Bootstrap elements, 225 
new in HTML5, 59-61 
review Q & A, 62-63 
tables. See Tables 
tags, 56-58 
template code validation, 223-224 
understanding, 54, 360 
where it began, 54-55 
HTML tab, Property inspector, 38 
HTML5 
browser antics and, 111 
common defaults, 109-110 
image-based link styling, 384 
what’s new in, 59-61 
HTTP requests, 91-92 
Hyperlink icon, 380 
Hyperlinks 
additional exercises, 400 
destination, 390-393 
email links, 381-383 
external, 360, 376-381 
image-based, 383-386 
internal, 360, 366-376 
overview of, 360-361 
pseudo-classes, 371 
review Q&A, 401 


sitewide check of, 399-400 
styling, 392 
targeting page elements, 386-390 
telephone, 398-399 
write code automatically, 70-71 
HyperText Markup Language. 
See HTML (HyperText Markup 
Language) 


| 
id attributes 
content targeting, 386, 387 
creating, 130-131 
destination link in Element 
Display using, 390-392 
writing code automatically, 72-73 
Image Display, 47 
Image size 
changing, 319-322 
color and, 309 
download time and, 308 
formatting for, 310-311 
and insertion, 314, 324-325 
mobile device, 326, 334—337 
quality and, 331 / 
resolution and/307—308 
responsive, 334—337 
Images 
background, 191 
Bootstrap carousel, 348-351 
color palettes, 308-309 
default folder for, 313 
Dreamweaver tools for, 355 
editors for, 332 
extracting assets from mockups, 
185-187 
file formats for, 310-311 
formatting Property inspector, 38 
home page, 415-417 
image-based links, 383-386 
inserting. See Images, inserting 
lesson overview, 304: 
optimizing, 318-322 
Photoshop copy/paste, 329-332 
Photoshop Smart Objects, 
326-328 
placeholders, 203-209 
previewing completed files, 
311-313 
printing, 307 
replacing placeholder, 352-354 
resolution of, 307-308, 314 
review Q & A, 356-357 
saving, 330 
title attribute for, 315 
vector and raster, 306-311 


Images, inserting 
in Bootstrap carousels, 348-351 
in child pages, 352-354 
in Design view, 316-317 
with non-web file formats, 
322-325 
Photoshop copy/paste, 326-328 
in site template, 341-344 
via Assets panel, 333-334 
via Insert menu, 337-339 
via Insert panel, 339-341 
via Property inspector, 313-316 
Importing 
other styling sheets, 89-91 
tables from other sources, 
286-288 
text, 252—256 
Inheritance theory, styling CSS, 116 
Inline elements, HTML, 56 
Inline stylings 
Code Navigator does not 
show, 121 
CSS Designer computing/editing, 
NS), WA 
CSS formatting via, 113 
CSS rules hierarchy and, 116 
Insert menu, 337-339 
Insert panel, 339-341 
Inspect mode, troubleshooting via, 28 
Interface preferences, 22—24 
Internal hyperlinks 
creating relative, 366-369 
defined, 360 
home links, 369-374 
targeting page content, 387-390 
targeting via Element Display, 
390-393 
updating child pages, 374-376 
Internet speed, file size and, 309-310 


J 

Joint Photographic Experts Group 
(JPEG), 310-311 

JPEG (Joint Photographic Experts 
Group), 310-311 


K 


Keyboard shortcuts, customizing, 
30=07 


L 

Layers button, 186 

Layout 
page. See Page layout 
webpage design, 141 
workspace, 29 
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Layout Category icon, 184, 194 
ESS 
CSS. See CSS preprocessors 
Sass vs., 79 
<li> element 
<a> element as child of, 96 
expanding code and, 99 
HTML navigation menus with, 55 
using parent tags, 97 
Line numbers, code selection via, 95 
Link Checker, 399-400 
Link icon, 172, 174, 385 
Linked stylings, 113 
Links. See Hyperlinks 
Linting support, code, 93-94 
Lists 
content structures based on, 
266-270 
creating, 260—261 
new items created for, 270-273 
ordered, 261-262 
pasting multiple elements in, 270 
unordered, 263-266 
Live code mode, 27—28 
Live view 
Code Navigator accessed in, 
119-120 
Code view displayed with, 26-27 
Design view shares window 
with, 25 
Element Display only visible in, 46 
links in, 372, 377-380 
Live Code mode in, 27-28 
for mobile image fit, 334 
pasting multiple elements in, 
270-273 
previewing completed file in, 
250-252 
workspace customization in, 26, 
107-108 
Local/Network connection, 404, 405 
Local sites 
defined, 404 
synchronization with, 422-425 
uploading/downloading to, 421 
Logos 
as links, 369-370 
vector graphics for, 306 
Lorem generator, Emmet, 73 


M 

Mark up, via HTML tags, 55 

@Media pane, CSS Designer 
element styling with Extract, 160 
inspecting/editing styling, 124 
workspace customization, 42 


INDEX 


Media, Visual Media Query 
(VMQ), 45 
Menu items 
creating with Copy and Paste, 
174-176 
creating with DOM panel, 
172-174 
inserting new, 170-172 
Metadata 
adding to child page, 237—238 
creating lists with, 260 
inserting optional editable 
regions, 233 
inserting templates, 221-222 
updating/replacing file, 252-256 
Mobile devices 
adapting content to, 425 
image responsiveness and, 
334-337 
image size and, 326 
telephone links for, 398-399 
web design, 143 
Mobile-first web design, 143 
Mockups 
image assets extracted from, 
185-187 
web design, 144-145 
wireframing page design, 141-143 
Modes, CSS Designer, 125-126 
.mt-3 class addition, 345-348 
Multi Column predefined layout, 
151-152 
Multicursor support, 74-75 


N 

Named anchors, 390 

Naming 
editable regions, 230 
home pages, 412 
selectors, 161 

Navigation 
destination links, 390-393 
email links, 381-383 
external links, 376-380 
extracting text from Photoshop 

mockup, 164-167 
hinting menu, 349 
home page, 412-417 
hyperlinks, 360-361 
image-based links, 383-386 
internal links, 366-376 
lesson overview, 358 
menu locking, 393-394. 
menu styling, 394-397 
nesting CSS selectors while 
styling, 89-91 


previewing completed files, 
361-366 
styling elements with Extract, 
157-158 
target attributes, 381 
targeting page elements, 386-390 
thumbnails in site design for, 
139-140 
writing code manually, 69-73 
Nesting CSS selectors, 89-91 
New Document dialog 
creating CSS source file, 81-82 
predefined layouts, 150-153 
writing code manually, 67 
New Feature guides, 21 


O 

Optimization, image 
file size, 309-310 
for non-web file types, 322-325 
with Property inspector, 318-322 
via Photoshop, 329 

Optional editable regions 
inserting, 231—233 
removing from child page, 

243-244 
Ordered lists, 261-262 


P 
Page design, web 
creating, 140-141 
wireframes, 141-143 
Page layout 
deleting components/attributes 
from template, 167-170 
element styling with Extract 
panel, 155-162 
extracting text from Photoshop 
mockup, 164-166 
finishing, 196-198 
gradient backgrounds, 180-185 
header background images, 
192-196 
image assets extracted from 
mockups, 185-187 
lesson overview, 148-149 
modifying Bootstrap, 209-213 
new Bootstrap structures, 
187-191 
new menu items, 170-172 
new menu items with Copy and 
Paste, 174-176 
new menu items with DOM 
panel, 172-174 
page design options, 150 
predefined layouts, 150-153 


predefined layouts, styling, 
153-155 
review Q&A, 199 
text styling with Extract, 176-179 
troubleshooting CSS conflicts, 
162-164 
Panels 
closing groups of, 31-32 
docking, 34 
dragging, 32 
floating, 32-33 
grouping and stacking, 33 
minimizing, 30-31 
personalizing, 34 
workspace customization, 30 
Parent elements, inheritance 
theory, 116 
Parent tags, 97-98 
Passwords, 406 
Personalizing workspace, 34 
Photoshop 
copying and pasting from, 
329-332 
extracting text from mockup, 
164-167 
Smart Objects, 325, 326-328 
styling predefined layout, 153-155 
picture element, 326 
Pixels, 306-307 
Placeholders 
adding template, 216-218 
basing content structure on lists, 
267-268 
creating lists, 260-261 
creating tables, 274-276 
creating unordered lists, 263—266 
duplicating Bootstrap rows, 
256-258 
importing text, 253-256 
inserting webpage metadata, 
221-222 
pasting multiple elements in Live 
view, 270 
writing code automatically, 73 
PNG (Portable Network 
Graphics), 311 
Position Assist dialog 
absolute links in Live view via, 377 
creating tables, 274 
Insert menu, 338 
Insert panel, 339 
internal targeted links via, 388 
new Bootstrap structures via, 188 
new menu items, 170 
overview of, 46 


Predefined layouts, 150-155 

Preferences, interface, 22-24 

Proof of concept, wireframing page 
design, 141 

Properties pane, CSS Designer 


defined, 124-128 

gradient backgrounds, 181, 183 
new Bootstrap structures, 190 
table cells, 282-283 

tables, 280-281 

workspace customization, 43-44 


Property inspector 


Element Display, 46 

image copy/paste via, 330-332 
Image Display, 47 

image insertion, 314—316 
image optimization, 318-322 
importing text, 253 

link creation, 368-369 

Link field, 381 

lists, 260 

overview of, 37-38 

table display, 285 

Target menu, 380, 381 


Pseudo-classes, 37, 395 
Publishing to web 


Q 


cloaking local folders, 410-412 
home page creation, 412—417 
information protection and, 412 
lesson overview, 402 
local/remote synchronization, 
422-425 
online uploads, 418-422 
pre-launch checklist, 417 
remote site connection, 404—405 
remote site setup, 405—410 
review Q & A, 426-427 


Quality setting, 323 


Quick Property Inspector icon, 46, 47 


R 


Raster graphics, 306-311 
Related Files interface 


accessing Split Code view, 100 

previewing assets in Code 
view, 101 

understand, 103 

working with, 39 


Relative links, 360, 366-369 
Remote sites 


connecting to, 404—405 

file cloaking, 410-412, 420-421 
file overwrites at, 420 

FTP site setup, 405-410 


functionality test on, 409 

public and private folders on, 406 

publishing to, 418-422 

synchronization with, 408, 
422-425 

troubleshooting connection, 408 

uploading/downloading to, 421 


Replace, Find and, 295-302 
Resolution, image 


mobile devices, 326 
raster graphics, 307-308 
and size, 314, 331 


Robots, spamming by, 387 
Rows 


adding header rows to tables, 
283-284 

adding to tables, 276-279 

duplicating Bootstrap, 256-258 


Rules, CSS 


adding header rows to tables, 
283-284 

Bootstrap layout modification, 
210-213 

Bootstrap text format 
modification, 214-215 

cascade theory and, 114-116 

descendant theory and, 117 

gradient backgrounds, 180-185 

header background images, 
192-196 

importing other styling sheets, 
91-92 

inheritance theory and, 116 

nesting CSS selectors, 89-91 

overview of, 113-114 

specificity theory and, 117-118 

styling CSS, 115 

styling elements with Extract, 
157-162 

styling table cells, 282—283 

styling tables, 280-281 

styling with Code Navigator, 
119-123 

styling with CSS Designer, 
123-128 

syntax, 115 

table display, 286 

troubleshooting CSS conflicts, 
162-164 


Sandwich icon, 284, 286 
Sass 


as CSS preprocessor. See CSS 
preprocessors 
LESS vs., 79 
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Saving 

custom workspace, 34 

predefined layouts, 152-153 

preferences, 24 

Save All command, 35-36 

Scalable Vector Graphic (SVG), 306 

Screening, 307 

Scrolling, 393 

SCSS. See CSS preprocessors 

Search panel, Find and Replace, 

299-302 

Search Results panel, Find and 

Replace, 300 

<section> element, 60, 61, 117, 288, 

289-291 

Selectors 

CSS rules and, 113-114 

nesting CSS, 89-91 

Selectors pane, CSS Designer 

element styling with Extract, 
160-161 

inspecting/editing styling, 
124-126 

text styling with Extract, 176-179 

troubleshooting CSS conflicts, 
162-164 

workspace customization, 43 

Semantic errors, fixing template, 

218-221 

Semantic text, tables, 288-291 

Semantic web design, 60-61 

Servers 

configuration options, 407—408 

file cloaking, 410-412 

home page names and, 412 

local/remote synchronization, 
422-425 

publishing to, 418—422 

remote site setup, 404—410 

testing, 409 

uploading to, 406 

username/password for, 406 

Shorthand, CSS, 128 

Show Set option, CSS Designer 

defined, 43 

deselecting, 124—126, 192, 
IXS5), PT? 

enabling, 126 

for gradient backgrounds using 
Extract, 180-184: 

new list-based items and, 257 

for styling elements using Extract, 
156 

styling tables with CSS, 280-281 


INDEX 


Simple Grid predefined layout, 
151-152 


Site Definition, CSS preprocessor, 78 


Site Root folder, CSS preprocessor, 
80-81 
Size. See Image size 
Size Constraint icon, 325 
Source & Output category, CSS 
preprocessor, 79-80 
Source Code option, Related Files 
interface, 39 
Source folder, CSS preprocessor, 
80-81 
Sources pane, CSS Designer 
gradient backgrounds, 181 
inspect/edit styling, 124 
styling elements, 158-160 
workspace customization, 42 
Spam, 387 
Specificity theory, styling CSS, 
117-118 
Spell-checking webpages, 293-295 
Split Code view, 99-100 
Split view, 26-27, 107-108, 112 
Src field, Property inspector, 
314-315, 342, 384 
Staging server, 404 
Standard toolbar, 35 
Standard workspace, 29 
Start Screen, 19-21 
<strong> tag (bold), 47, 58, 379 
Structural elements, HTML, 56 
SVG (Scalable Vector Graphic), 306 
Switching and splitting views, 
workspace, 24-28 
Synchronization, local/remote site, 
422-425 


T 
Tables 

adding data, 276 

adding header rows, 283-284 


adding rows to existing, 276-279 


controlling display, 284-288 
copying and pasting, 279-280 
creating from scratch, 274—276 


creating semantic text structures, 


288-291 
formatting caption elements, 
291-293 


formatting Property inspector, 38 


overview of, 274 
styling cells, 282-283 
styling with CSS, 280-281 


Tag selectors 
basing content structure on lists, 
268-269 
deleting unused Bootstrap 
components, 259 
duplicating Bootstrap rows, 
256-258 
gradient backgrounds with, 180 
ordered lists with, 261-262 
overview of, 40-41 
removing unneeded template 
components, 203-209 
selecting code via, 95-97 
styling elements with Extract, 157 
unordered lists with, 263, 266, 
267-269 
workspace customization and, 
40-41 
Tags, HTML 
defaults, 108-111 
frequently used, 56-58 
new HTMLS5, 59-60 
overview of, 55 
Target menu, 380, 381 
Telephone links, 398-399 
Templates 
adding classes to, 345-348 
boilerplates/placeholders for, 
216-218 
Bootstrap layout modification, 
209-213 
Bootstrap text format 
modification, 214-215 
creating, 202—203 
defining editable regions. See 
Editable regions, templates 
deleting components/attributes 
from, 167-170 
fixing semantic errors, 218-221 
HTML code validation, 223-224 
image insertion in site, 341-344 
lesson overview, 200-201 
metadata insertion, 221-222 
navigation menu edits to, 393 
predefined layout, 150-153 
removing unneeded components, 
203-209 
review Q & A, 247-248 
server backups of, 410 
updating, 238-243 
updating child pages, 243-245 
working with child pages, 
233-238 
Testing server, 409 


Text 
Bootstrap format modification, 
214-215 
Bootstrap styling, 351-352 
deleting unused Bootstrap 
components, 258-259 
duplicating Bootstrap rows, 
256-258 
extracting from Photoshop 
mockup, 164—167 
finding and replacing, 295-302 
on home page, 415-417 
importing, 252-256 
lesson overview, 248-249 
as link, 370 
lists. See Lists 
new Bootstrap structures for, 
189, 191 
previewing completed file, 
250-252 
review Q & A, 303 
spell-checking webpages, 293-295 
styling navigation menu, 395 
styling using Extract, 176-179 
table. See Tables 
Text Category icon, 184, 191, 280 
Text Display 
absolute links via, 379-380 
email link setup via, 368 
id-baséd link destinations, 392 
link creation in, 379-380 
new elements with DOM 
panel, 173 
new menu items inserted, 172 
overview of, 47 
text links via, 384-385 
Thumbnails, web design via, 139-140 
Title, metadata for page, 221 
Toolbars 
working with, 34-35 
workspace customization, 34-35 
Troubleshooting 
CSS conflicts, 162-164 
in Inspect mode, 28 
in Live Code mode, 27 


True color, 309 
Typekit fonts, wireframing page 
design, 142 


U 
<ul> element, 58, 70, 90, 96, 98, 263 
Unordered lists, 262 
Updates 

removing optional region from 

child page, 243-244. 

template, 239-242 
URL fields, 378-379, 412 
Usernames, 406 


V 
Validation, HTML code, 223-224 
Variables, CSS source file, 82-83 
Vector graphics, 306 
Version control setup, workspace, 
47-49 
Views 
Code. See Code view 
Design. See Design view 
Live. See Live view 
Split, 26-27, 1074108, 112 
switching/splitting, 24-28 
VMQ (Visual Media Query) 
interface, 45 


W 

W3Schools, website design, 137 

Web design. See also Page layout 
lesson overview, 134-135 
for mobile devices, 143, 334 
for new website, 136-137 
pages, 140-141 
raster-based images for, 306 
responsive, 138 
review Q & A, 146-147 
scenario, 139 
spell-checking pages, 293-295 
third option for, 143-145 
thumbnails, 139-140 
wireframes, 141-143 


Web-hosting service, designing new 
site, 137 
Web-safe color palette, 309 
Websites 
local, 404 
remote, 404—410 
uploading/downloading, 421 
Weight, calculating specificity, 
117-118 
Wildcards, descendant theory, 117 
Window menu, all panels listed in, 30 
Wireframes, page design, 141-143 
Workspace customization 
CSS Designer, 41-45 
DOM Viewer, 45 
element dialogs, displays, and 
inspectors, 46-47 
explore, experiment, and learn, 49 
interface preferences, 22—24 
keyboard shortcuts, 36-37 
layout, 29 
lesson overview, 16-17 
New Feature guides, 21 
panels, 30-34 
personalize, 34 
Property inspector, 37-38 
Related Files, 39 
review Q & A, 50-51 
Start Screen, 19-21 
switching/splitting views, 24—28 
tag selectors, 40-41 
toolbars, 34-35 
touring workspace, 18-19 
version control setup, 47-49 
Visual Media Query (VMQ) 
interface, 45 
WYSIWYG (What You See Is What 
You Get) editor, Dreamweaver, 18, 
25, 66 
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Production Notes 


Adobe Dreamweaver CC Classroom in a Book (2020 release) was created electroni- 
cally using Adobe InDesign. Art was produced using Adobe InDesign, Adobe 
Illustrator, and Adobe Photoshop. References to company names in the lessons are 
for demonstration purposes only and are not intended to refer to any actual organi- 


zation or person. 


Images 


Photographic images and illustrations are intended for use with the tutorials. 
Photographic images used to create the webpages in the Adobe Dreamweaver 
Classroom in a Book (2020 release) lessons are copyright Shutterstock, 
shutterstock.com: 


e London composite images on pages 155, 156, 182, 183, and 190 
© s4svisuals/shutterstock.com 


¢ Brooklyn Bridge and lower Manhattan across East River, NYC, composite 
images on pages 155, 156, 166, 179, 182, 183, and 190 @ ARK NEYMAN/ 
shutterstock.com 
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Jim Maivald began his career as the editor of an architectural and engineering 
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and dozens of articles on electronic design and production. He founded his own 
graphic design practice in 1991 and has worked with companies big and small 
crafting corporate identities, brochures, and custom illustrations. He started learn- 
ing HTML in late ’90s and was an early adopter of Dreamweaver. Jim now special- 
izes in web-based content management systems and document automation. 
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